4

Highcharts ライブラリの最新バージョンを使用しています。全体的なライブラリはかなりクールに見えますが、非常に厄介な問題に直面しました。レンダリングするオプションが 1 つしかない場合、ドーナツ チャートが 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

アークが完全にレンダリングされた場合にのみ問題が存在するようです。この弧の小さな部分を取り除くと、問題はなくなります。この問題を修正するには: 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 に答える