没有内馅饼的Highcharts甜甜圈图？

Posted 2023-02-16

【中文标题】没有内馅饼的Highcharts甜甜圈图？

【英文标题】：Highcharts donut chart without inner pie?

【发布时间】：2012-07-25 14:14:56

【问题描述】：

我一直在寻找使用 Highcharts 库生成最简单圆环图的解决方案。但是，Highcharts 的所有示例都显示了内馅饼和外甜甜圈的图表样式（参考：http://www.highcharts.com/demo/pie-donut）

我怎样才能摆脱内馅饼而只保留外甜甜圈，就像其他图书馆一样？ （类似于 RGraph：https://www.rgraph.net/demos/donut-3d.html）

谢谢。

【参考方案1】：

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

所以你的参数将包含如下内容：

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

这是jsFiddle of a complete example。

【讨论】：

谢谢，简单又聪明！

谢谢。对我帮助很大！

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

【参考方案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();
    );
);

【参考方案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