使用 Highcharts 创建环形图答案

【问题标题】：Creating a ring chart with Highcharts使用 Highcharts 创建环形图
【发布时间】：2013-09-18 23:51:48
【问题描述】：

我正在尝试使用圆环图使用 Highcharts 创建一个类似于 here（向下滚动到环形图）的“环形图”。因此，如果我想显示某物的 46% 的数据值，它会逆时针旋转到 46% 并停止。

目前我没有太多事情要做，但是here is a fiddle 与我目前所拥有的一样。

和代码：

$(function () {

       // Create the chart
        $('#container').highcharts({
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Browser market share, April, 2011'
            },
            yAxis: {
                title: {
                    text: 'Total percent market share'
                }
            },
            plotOptions: {
                pie: {
                    shadow: false,
                    center: ['50%', '50%']
                }
            },
            tooltip: {
                valueSuffix: '%'
            },
            series: [ {
                name: 'Art Education',
                data: [
                        ['Covered by contributions',46]
                ],
                size: '70%',
                innerSize: '40%',
                dataLabels: {
                    formatter: function() {
                        // display only if larger than 1
                        return this.y > 1 ? '<b>'+ this.series.name +':</b> '+ this.y +'%'  : null;
                    }
                }
            }, {
                name: 'Versions',
                data: [1, 2],
                size: '80%',
                innerSize: '70%',
                dataLabels: {
                    formatter: function() {
                        // display only if larger than 1
                        return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                    }
                }
            }]
        });
    });


        </script>
    </head>
    <body>
<script src="./js/highcharts.js"></script>
<script src="./js/modules/exporting.js"></script>

<div id="container" style="min-width: 250px; width: 100%; height: 100%; margin: 0 auto;"></div>

2017 年更新：

Highcharts 现在可以做到Semi circle donut charts，这正是我想要的。 Example.

【问题讨论】：

“它逆时针旋转到 46%” - 什么的 46%？ 360 度的 46%？
是的，360 度圆的 46%，最好是逆时针方向。
用极坐标图代替饼图怎么样？一般来说，饼图需要有完整的圆圈，您可以尝试通过为切片设置一些白色、为该点禁用 dataLabel 等来避免这种情况，但这将是一个肮脏的解决方案，恕我直言。 Polar 的问题在于动画 - 因为动画将从图表的中心开始。

标签： javascript jquery charts highcharts

【解决方案1】：

使用带有一些数据插值的极坐标图的简单示例：http://jsfiddle.net/ghvKY/

function interpolateData (min, max, step, index) {
    var d = [];

    // add points from start to one before last
    for(var i = min; i < max; i += step){
         d.push([i,index]);   
    }
    //add end point
    d.push([max, index]);

    return d;
}

【讨论】：

这看起来很适合我需要它做的事情。谢谢！