Highcharts甜甜圈图表在IE 8中呈现为饼图

时间:2013-03-25 13:34:48

标签: javascript internet-explorer charts highcharts

我正在使用最新版本的Highcharts库。整体库看起来很酷,但是我遇到了一个非常烦人的问题:当只有一个选项需要渲染时,在IE 8中无法正确渲染圆环图。

            var chart;
        var data = [['There could be only one', 1444]];
        var containerId = 'container';
        var chartTitle = 'Equity';

        $(document).ready(function () {
Highcharts.theme = {
   colors: ["#1987c9", "#7fba00", "#f4911e", "#006D75", "#542344", "#f7403a"]
}

var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

chart = new Highcharts.Chart({
    chart: {
        renderTo: containerId,
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        backgroundColor:'rgba(255, 255, 255, 0.1)'
    },
    credits:{
        enabled:false
    },
    legend:{
        align: 'right',
        verticalAlign: 'middle',
        layout: 'vertical',
        width: 170,
        itemStyle: {
            fontSize: '13px'
        }
    },
    title: {
        text: chartTitle,
        style: {
            fontSize: '17px'
        }
    },
    tooltip: {
        pointFormat: '{series.name} <b>{point.y}</b>',
        percentageDecimals: 1
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                formatter: function() {
                    return this.point.name +': '+ this.point.y.toLocaleString();
                },
                style: {
                    fontSize: '13px'
                }
            },
            innerSize: '40%',
            showInLegend: true
        }
    },
    series: [{
        type: 'pie',
        name: chartTitle,
        data: data
    }],
    exporting: {
        enabled:false
    }
});

});

JSFiddle:http://jsfiddle.net/olanet/whZnP/2/

JSFiddle结果(启用IE 8兼容性或使用IE 8):http://fiddle.jshell.net/olanet/whZnP/2/show/

Chart in IE 8

Chart in IE 9

2 个答案:

答案 0 :(得分:1)

看起来问题仅在完全呈现弧时存在。如果我们删除这个弧的一小部分比问题消失。要解决此问题: 1.在源代码中找到以下行: end = mathRound((startAngleRad + (cumulative * circ)) * precision) / precision; 2.在其后添加以下代码:

if (len == 1) {
    end -= 0.001;
}

3。这会在圆圈中添加一个小间隙,但最终结果如下: enter image description here

答案 1 :(得分:0)

它看起来像一个错误,所以我报告了它https://github.com/highslide-software/highcharts.com/issues/1642