0

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

在这一点上，我没有太多事情要做，但这是我迄今为止所拥有的。

和代码：

$(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 现在可以做我一直在寻找的半圆形甜甜圈图表。例子。

4

1 回答 1

2

使用带有一些数据插值的极坐标图的简单示例：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;
}
于 2013-09-19T12:08:07.210 回答