4

我正在使用最新版本的 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/

IE 8 中的图表

IE 9 中的图表

4

2 回答 2

1

看起来问题只有在完全渲染 arc 时才存在。如果我们删除该弧的一小部分，问题就会消失。要解决此问题： 1. 在源代码中找到以下行： end = mathRound((startAngleRad + (cumulative * circ)) * precision) / precision; 2. 在其后添加以下代码：

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

3. 这会在一个圆圈中添加一个小间隙，但最终结果将如下所示： 在此处输入图像描述

于 2013-03-27T12:58:28.883 回答
0

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

于 2013-03-27T14:19:16.817 回答