저는 Highcharts.js를 사용하여 jqueryUI draggables 인 일부 div에 많은 차트를 렌더링하고 있습니다. Chrome에서는 완벽하게 정상적으로 작동합니다. 그러나 Internet Explorer (11에서 테스트되었지만 다른 버전에서도 테스트되었을 수 있음)에는 확장 문제가 있습니다. 차트를 렌더링하는 스크립트는 브라우저에 따라 다른 설정을 실행하므로 Chrome 부분을 어지럽히 지 않고 IE 부분 만 혼란스럽게 할 수 있습니다. 이는 어떻게 해야 모양 (어떻게 크롬에서 수행) :Highcharts 범례 항목을 한 줄에 겹쳐서 표시합니다.
모두가 잘 간격, 그리고 내가 어떤 간격 옵션을 설정하지 않았다. 이것이 IE11에서 보이는 방법입니다.
스케일링 문제와 내가 처리 할 수 y 축 레이블의 잘못두기, 즉 쉽게 변경할 수 : 원래 전체 사업부의 외부 렌더링했기 때문에 나는, 줄거리 자체에 약간의 여백을 추가했다. 내 문제는 전설입니다. Chrome에서는 전설에 대한 구체적인 옵션을 설정하지 않았으므로 괜찮 았습니다. IE에서는 분명히 작동하지 않습니다. 나는 왜 이것이 일어나고 있는지에 대한 문서 나 도움을 찾을 수 없습니다. 모든 항목이 있으며 정상적인 동작을 위해 항목을 계속 클릭 할 수 있습니다. 그들은 모두 한 줄에 붙어 있습니다.
누구든지이 문제를 해결하기 전에이 문제가 발생 했습니까? 차트 설정에서 전설에 대한 여러 가지 옵션을 시도했지만, 한 줄에 붙어있는 상태에서 이동할 수있는 것 외에도 영향을 미칠 수 없습니다.
코드 샘플 : http://jsfiddle.net/dLL8cw7s/5/
는 이상하게도, 모든 것이 완벽하게 잘 작동 : HTML
<div id="dropwrap">
<div id="dock">
<div id="dockhead">Available Cards</div>
<!--div class="draggable" id="drag1">10 Year History</div-->
<div class="draggable" id="drag2" style="top:180px;">Premium<br>Pie Chart</div>
<div class="draggable" id="drag3" style="top:230px;">Loss<br>Pie Chart</div>
<div class="draggable" id="drag4" style="top:280px;">Premium<br>History Chart</div>
<div class="draggable" id="drag5" style="top:330px;">Loss<br>History Chart</div>
<div class="draggable" id="drag6" style="top:380px;">Loss Ratio<br>History Chart</div>
</div>
<div id="expand">
<div id="hlpmsg" style="text-weight: bold; font-size: 150%; position: absolute; top: 350px; left: 500px;">Drag cards here to expand them!</div>
</div>
</div>
JS
function areachartgen(chtype, item) {
console.log($(item));
$('#drag4').highcharts({
chart: {
type: 'area',
backgroundColor: '#57CF57',
borderColor: '#000',
borderRadius: '10px',
marginBottom: 150,
marginLeft: 70,
marginTop: 40
},
legend: {
floating: true,
itemStyle: {
'lineHeight': '20px'
},
maxHeight: 150,
labelFormatter: function() {
return this.name;
},
layout: 'vertical'
},
title: {
text: '10 Year ' + chtype + ' History'
},
/*subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
'thebulletin.metapress.com</a>'
},*/
xAxis: {
allowDecimals: false,
labels: {
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: chtype
},
labels: {
formatter: function() {
if (chtype === "Loss Ratio") {
return this.value + '%';
} else {
return '$' + this.value/1000 + 'k';
}
},
labels: {
overflow: "justify"
}
}
},
tooltip: {
pointFormat: '{series.name}: {point.y}',
valueDecimals: 2
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
stacking: "normal"
}
},
colors: [
'#6FF299', '#5A90D6', '#E39220', '#D17BC6', '#8085e9',
'#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
series: [{
name: 'Casualty',
data: [
[2004, 360902.0],
[2005, 371489.0],
[2006, 398748.0],
[2007, 416682.0],
[2008, 413205.0],
[2009, 374988.0],
[2010, 400701.0],
[2011, 483902.0],
[2012, 447391.0],
[2013, 456503.0]
]
}, {
name: 'Engineering',
data: [
[2004, 0.0],
[2005, 0.0],
[2006, 0.0],
[2007, 0.0],
[2008, 0.0],
[2009, 0.0],
[2010, 0.0],
[2011, 0.0],
[2012, 0.0],
[2013, 0.0]
]
}, {
name: 'Ocean Marine',
data: [
[2004, 0.0],
[2005, 180000.0],
[2006, 234395.0],
[2007, 248322.0],
[2008, 262216.0],
[2009, 248754.0],
[2010, 274888.0],
[2011, 289781.0],
[2012, 340459.0],
[2013, 405247.0]
]
}, {
name: 'Property',
data: [
[2004, 285354.0],
[2005, 365038.0],
[2006, 395420.0],
[2007, 554621.0],
[2008, 685197.0],
[2009, 630535.0],
[2010, 613608.0],
[2011, 643399.0],
[2012, 704345.32],
[2013, 822684.93]
]
}]
});
$(item).resize();
} 여기
는 바이올린에 대한 링크입니다 IE에서도. 하지만 내 웹 사이트에서 실행할 때.
문제를 나타내는 jsFiddle 또는 코드를 포함시켜야합니다. – Mark