Question

我正在尝试使用圆环图创建一个类似于使用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.

Answer 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;
}

使用Highcharts创建环形图表

1 个答案: