没有内部圆饼的Highcharts甜甜圈图表？

Question

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

我该如何摆脱内部饼图，只保留外部甜甜圈图表，就像其他库那样？ （例如 RGraph：https://www.rgraph.net/demos/donut-3d.html）

谢谢。

- Jonathan Chen

Answer 1

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

因此，您的参数将包含类似于以下内容：

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

这里有一个完整示例的jsFiddle链接。

- andypaxo

---

谢谢，这很简单又聪明！ - Jonathan Chen

在我花了将近两个小时的时间寻找图表代码中的一个错误后，阅读了这个答案，我发现我拼错了“innersize”，正确的是“innerSize”。这就是为什么即使是不相关的问题也可以通过在StackOverflow上寻找答案来解决。谢谢！ - Paulo Bueno

Answer 2

**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();
    });
});

- Khandad Niazi

Answer 3

这是我搜索到的最佳结果，但给出的答案对我并没有起作用。我需要比简单的数组数组更多控制数据点的功能。我需要使用JSON对象来配置其他选项，如特定数据的显式颜色。通过一些研究，我发现你不必修改你的数据格式。要将饼图转换为甜甜圈图，只需在数据系列中设置一个大于0的innerSize值即可。

从Highcharts文档中可以得知：

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

- Jon Dysinger