Highcharts没有内部饼图的圆环图

Highcharts donut chart without inner pie?

本文关键字：圆环图 内部 Highcharts      更新时间：2024-03-23

我一直在寻找用Highcharts库生成最简单圆环图的解决方案。然而，Highcharts的所有示例都显示了内部馅饼和外部甜甜圈的图表风格（请参阅：http://www.highcharts.com/demo/pie-donut)

我怎么能像其他图书馆一样，去掉里面的馅饼，只保留外面的甜甜圈呢？（类似RGraph:https://www.rgraph.net/demos/donut-3d.html)

谢谢。

您只需要将数据提供为两个元素（键/值）数组的数组。指定一个innerSize以获取甜甜圈样式。

所以你的参数会包含这样的东西：

...
data: [["Firefox",6],["MSIE",4],["Chrome",7]],
innerSize: '20%',
...

下面是一个完整示例的jsFiddle。

**I hope this example of highchat will solve your problum
http://jsfiddle.net/e2qpa/3/
$(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        plotOptions: {
            pie: {
                borderColor: '#000000',
                innerSize: '60%'
            }
        },
        series: [{
            data: [
                ['Firefox', 44.2],
                ['IE7', 26.6],
                ['IE6', 20],
                ['Chrome', 3.1],
                ['Other', 5.4]
                ]}]
    },
    // using
    function(chart) { // on complete
        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;
    // Render the circle
    chart.renderer.circle(xpos, ypos, circleradius).attr({
        fill: '#ddd',
    }).add();
    // Render the text
    chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({
            width: circleradius*2,
            color: '#4572A7',
            fontSize: '16px',
            textAlign: 'center'
      }).attr({
            // why doesn't zIndex get the text in front of the chart?
            zIndex: 999
        }).add();
    });
});

这是最热门的搜索结果，给出的答案对我来说不起作用。我需要对数据点进行更多的控制，而不仅仅是一个简单的数组。我需要使用JSON对象来为特定数据配置其他选项，如显式颜色。我通过一些研究发现，你根本不必修改你的数据格式。要将饼图制作成圆环图，只需在数据序列中设置一个大于0的innerSize值即可。

来自高图文档：

innerSize：的内径大小馅饼。大于0的大小将呈现环形图。可以是百分比或像素值。百分比与饼图大小有关。像素值以整数形式给出。

因此，您可以获得一个简单的圆环图，其中包含以下数据：

        series: [{
            innerSize: '30%',
            data: [
                {name: 'Yellow Slice', y: 12, color: 'yellow'},
                {name: 'Red Slice', y: 10, color: 'red' },
                {name: 'Blue Slice', y: 33, color: 'blue'},
                {name: 'Green Slice', y: 20, color: 'green'}
            ]
        }]

JS Fiddle

相关文章：