javascript - Highcharts 在 ie 11 中不起作用

Question

请不要说已经问过的问题。我搜索了很多但都失败了。

图表在 chrome、Firefox 和 edge 中完美显示，但在 IE 11 及更低版本中无法显示。

这是我的代码

Highcharts.chart('teledensity', {
    chart: {
        type: 'line'
    },
    colors: [graph_data.series_color_one,graph_data.series_color_two,graph_data.series_color_three],
    title: {
        text: 'title'
    },

    credits:{
        enabled:false
    },
    xAxis: {
        type: 'category',
        labels: {
            autoRotation: [0],
            style: {
                fontSize: '11px',
                fontFamily: 'Verdana, sans-serif'
            }
        },
        categories: graph_categories,
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'title of y-axis'
        },
        stackLabels: {
            enabled: true,
            formatter: function(){

                // var val = this.total;            
                // return (val/1000000).toFixed(2);
            },
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
        }
    },
    legend: {
        align: 'center',
        x: 20,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: 'white',
        // borderColor: '#CCC',
        // borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}',
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                formatter: function(){
                    var val = this.y;                   
                    return (val/1000000).toFixed(2);
                },
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            },
            treshold: 1
        }
    },
    series: [{
        name: 'series one',
        data: ['1','2','3'],
        marker: {
            lineWidth: 2,
            lineColor: '#000',
            fillColor: 'white'
        }

    }, {
        name: 'series two',
        data: ['1','2','3'],
        marker: {
            symbol: 'square'
        },
    }, {
        name: 'series three',
        data: ['1','2','3'],
        marker: {
            symbol: 'square'
        },
    }]
}); 

Answer 1

问题出在您提供的系列上。我刚刚将您的系列更改如下。

series: [{
    name: 'series one',
    data: [1,2,3],
    marker: {
        lineWidth: 2,
        lineColor: '#000',
        fillColor: 'white'
    }

}, {
    name: 'series two',
    data: [4,5,6],
    marker: {
        symbol: 'square'
    },
}, {
    name: 'series three',
    data: [7,8,9],
    marker: {
        symbol: 'square'
    },
}]

你可以看到，你得到的数据是字符串数据:['1','2','3']。可以看到更新后的jsFiddle在这里。

注意:如果 jsFiddle 未在您的 IE 浏览器中加载，请尝试使用 draft version of jsFiddle .

我还建议您设计容器 div 的样式，在您的情况下 teledensity 具有一定的高度。

#teledensity {
    min-width: 310px;
    max-width: 800px;
    height: 400px;
    margin: 0 auto
}

Highcharts.chart('teledensity', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'title'
    },

    credits:{
        enabled:false
    },
    xAxis: {
        type: 'category',
        labels: {
            autoRotation: [0],
            style: {
                fontSize: '11px',
                fontFamily: 'Verdana, sans-serif'
            }
        },
        categories: ['2015','2016','2017'],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'title of y-axis'
        },
        stackLabels: {
            enabled: true,
            formatter: function(){

                // var val = this.total;            
                // return (val/1000000).toFixed(2);
            },
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
        }
    },
    legend: {
        align: 'center',
        x: 20,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: 'white',
        // borderColor: '#CCC',
        // borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}',
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                formatter: function(){
                    var val = this.y;                   
                    return (val/1000000).toFixed(2);
                },
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            },
            treshold: 1
        }
    },
    series: [{
        name: 'series one',
        data: [1,2,3],
        marker: {
            lineWidth: 2,
            lineColor: '#000',
            fillColor: 'white'
        }

    }, {
        name: 'series two',
        data: [4,5,6],
        marker: {
            symbol: 'square'
        },
    }, {
        name: 'series three',
        data: [7,8,9],
        marker: {
            symbol: 'square'
        },
    }]
}); 

#teledensity {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

<div id="teledensity"></div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>