HighCharts-条形图在IE8中无法正确呈现

HighCharts - barchart not rendering correctly in IE8

本文关键字：条形图 IE8 HighCharts-      更新时间：2023-09-26

我有一个简单的条形图，它在IE8下无法正确呈现（列不可见）。它确实能在firefox和IE 9+中正确显示。

我使用的是jQuery 1.8.3和highcharts 3.0.3。

我在代码示例中保留数据，因为要绘制的列数在重现问题时很重要。如果我删除一个序列，该图将在IE8中正确呈现。

这是代码：

$(function () {
    $(document).ready(function() {
        var barOptions = {
            chart: {
                renderTo: 'container',
                width:450,
                height:350,
                type: 'column'
            },
            xAxis: {
                categories: [0,1,2,3,4,5,6,7,8,9,10]
            },
            series: [{
                name: 'NC',
                data: [7057, 6858, 6643, 6570, 6115, 107, 31, 635, 203, 2, 2]
            }, {
                name: 'OK',
                data: [54047, 52484, 50591, 49479, 46677, 33, 156, 947, 408, 6, 2]
            }, {
                name: 'KO',
                data: [11388, 11115, 10742, 10757, 10290, 973, 914, 4054, 732, 34, 2]
            }, {
                name: 'VALID',
                data: [8836, 8509, 8255, 7760, 7621, 973, 914, 4054, 732, 34, 2]
            }, {
                name: 'CHECK',
                data: [115, 162, 150, 187, 172, 973, 914, 4054, 732, 34, 2]
            }, {
                name: 'COR',
                data: [12566, 12116, 11446, 10749, 10439, 973, 914, 4054, 732, 34, 2]
            }]
        };
       barChart = new Highcharts.Chart(barOptions);
    });
});

关于如何解决这个问题有什么想法吗？

正如其他人所说，这看起来像是Highcharts中的一个bug。一种解决方法是在图表呈现后立即以编程方式隐藏和显示其中一个系列。

JSFiddle在这里。请在IE8中尝试。

$(function () {
    var barOptions = {
        chart: {
            renderTo: 'container',
            width: 450,
            height: 350,
            type: 'column'
        },
        xAxis: {
            categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        },
        series: [{
            name: 'NC',
            data: [7057, 6858, 6643, 6570, 6115, 107, 31, 635, 203, 2, 2]
        }, {
            name: 'OK',
            data: [54047, 52484, 50591, 49479, 46677, 33, 156, 947, 408, 6, 2]
        }, {
            name: 'KO',
            data: [11388, 11115, 10742, 10757, 10290, 973, 914, 4054, 732, 34, 2]
        }, {
            name: 'VALID',
            data: [8836, 8509, 8255, 7760, 7621, 973, 914, 4054, 732, 34, 2]
        }, {
            name: 'CHECK',
            data: [115, 162, 150, 187, 172, 973, 914, 4054, 732, 34, 2]
        }, {
            name: 'COR',
            data: [12566, 12116, 11446, 10749, 10439, 973, 914, 4054, 732, 34, 2]
        }]
    };
    barChart = new Highcharts.Chart(barOptions);
    barChart.series[0].hide();
    barChart.series[0].show();
});

它看起来像bug，报告给我们的开发人员：https://github.com/highslide-software/highcharts.com/issues/2091

相关文章：