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。

注意：如果您的IE浏览器未加载jsFiddle，请尝试使用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>

Answer 2

解决...！

当我动态创建图形时，我使用的是IE11不支持ES6的.map（）所以我修改了代码

来自

graph_series_data_one = series_data_one？＆gt; .reverse（）。map（x =＆gt; parseFloat（x））; graph_series_data_two = series_data_two？＆gt; .reverse（）。map（x =＆gt; parseFloat（x））;

要

graph_series_data_one = series_data_one？＆gt; .reverse（）。map（function（x）{return parseFloat（x）;}）; graph_series_data_two = series_data_two？＆gt; .reverse（）。map（function（x）{return parseFloat（x）;}）;

并且有效。

感谢。

Highcharts不工作，即11

2 个答案: