Javascript 使用Highcharts创建环形图表_Javascript_Jquery_Charts_Highcharts

Javascript 使用Highcharts创建环形图表

javascript jquery charts highcharts

Javascript 使用Highcharts创建环形图表,javascript,jquery,charts,highcharts,Javascript,Jquery,Charts,Highcharts,我正在尝试创建一个“环形图”，类似于使用油炸圈饼图的高图（向下滚动到环形图）。所以，如果我想显示46%的数据值，它逆时针旋转到46%，然后停止在这一点上，我没有太多的东西可以去做，但以我目前所拥有的和代码： $(function () { // Create the chart $('#container').highcharts({ chart: { type: 'pie' },

我正在尝试创建一个“环形图”，类似于使用油炸圈饼图的高图（向下滚动到环形图）。所以，如果我想显示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>

$（函数（）{
//创建图表
$（“#容器”）。高图({
图表：{
键入：“馅饼”
},
标题：{
文字：“浏览器市场份额，2011年4月”
},
亚克斯：{
标题：{
文字：“总市场份额百分比”
}
},
打印选项：{
馅饼：{
影子：错，
中心：['50%，'50%']
}
},
工具提示：{
值后缀：''
},
系列：[{
名称：“艺术教育”，
数据：[
[“捐款涵盖”，46]
],
大小：“70%”，
内部尺寸：“40%”，
数据标签：{
格式化程序：函数（）{
//仅当大于1时显示
返回this.y>1？''+this.series.name+'：''+this.y+'%'：null；
}
}
}, {
名称：'版本'，
数据：[1,2]，
大小：“80%”，
内部尺寸：“70%”，
数据标签：{
格式化程序：函数（）{
//仅当大于1时显示
返回this.y>1？''+this.point.name+'：'+this.y+'%'：null；
}
}
}]
});
});

2017年更新：

Highcharts现在可以做我一直在寻找的事情

使用极坐标图和一些数据插值的简单示例：

函数插值数据（最小值、最大值、步长、索引）{
var d=[]；
//从开始到最后添加点
对于（变量i=min；i

“它逆时针旋转到46%”-什么的46%？360度的46%？是的，360度圆的46%，最好是逆时针方向。用极坐标图代替饼图怎么样？通常，饼图需要有一个完整的圆，您可以尝试通过为切片设置一些白色，禁用该点的dataLabel等来避免，但这将是一个肮脏的解决方案，IMHO。polar中的问题是动画，因为动画将从图表的中心开始。这看起来对我需要它做的事情非常有用。谢谢

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