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