0
我正在使用Highcharts.js將一堆圖表呈現給jqueryUI可拖動的某些div。在Chrome中，這很好。但是，在Internet Explorer中（在11中進行了測試，但也可能在其他版本中進行測試），但存在一些縮放問題。渲染圖表的腳本基於瀏覽器運行不同的設置，因此我可以自行處理IE部分而不會搞亂Chrome部分。這是怎麼回事應該看（以及它如何在Chrome中）：Highcharts圖例項目在一條線上並重疊
一切都很好地隔開，並且我沒有設置任何間距選項。這是它在IE11中的外觀。我加了一些利潤率情節本身，因爲它最初呈現完全的div外：
縮放問題和y軸的標籤，我可以處理的錯位，這是很容易改變。我的問題是傳說。在Chrome中，我沒有爲圖例設置特定的選項，我很好。顯然這不適用於IE。我無法找到任何文檔或幫助解釋爲什麼會發生這種情況。所有的項目都存在，並且您仍然可以點擊它們以獲得正常行爲。他們都只停留在這樣一條線上。
有沒有人遇到過這個問題之前/有任何想法來解決它？我在圖表設置中爲圖例嘗試了一大堆選項，但除了能夠移動它（同時仍然卡在一行上）之外，我不能影響它。
代碼示例： 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();
}
這裏是小提琴的鏈接：http://jsfiddle.net/dLL8cw7s/5/
奇怪的是，所有的功能都完全正常小提琴，即使在IE中。但在我的網站上運行時沒有。
你需要包含代碼或更好的jsFiddle，演示你的問題。 – Mark 2014-08-27 14:09:42