Question

我使用Highcharts.js将一堆图表呈现给一些jqueryUI draggables的div。在Chrome中，这非常好用。但是，在Internet Explorer中（在11中测试过，但也可能在其他版本中测试），存在一些扩展问题。渲染图表的脚本基于浏览器运行不同的设置，因此我可以自己搞乱IE部分，而不会弄乱Chrome部分。这就是它应该的样子（以及它在Chrome中的作用）：

enter image description here

一切都很好，我没有必要设置任何间距选项。这就是它在IE11中的外观。我在剧情本身添加了一些边距，因为它最初是在div之外渲染的：

enter image description here

我可以处理的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中，一切都在小提琴中完美无缺。但不是在我的网站上运行时。

Answer 1

发现问题。我包括了Polymer的platform.js，我之前曾用过一个脚手架。这增加了一些polyfill元素并搞砸了一切。我不再使用Polymer了，所以一旦我摆脱了包含该平台的那一行，一切都运转良好。

Highcharts传奇项目在一行上并且重叠

1 个答案: