HighCharts半饼圈

Question

我正在尝试在HighCharts中构建一个半饼图 。 我只需要为半圆提供1个值，值为45% ，在这种情况下，Firfox为45％。 我希望当我只提供1个值时，实际上它应该只渲染45％的圆圈，而不是整个100％。 我怎样才能做到这一点？

这是我的jsfiddle链接

Answer 1

我不确定这是不是你想要的：参见jsfiddle的例子

结束角度计算为45 * 180/100 = 81的比例。因此，结束角度为-9。

            startAngle: -90,
            endAngle: -9,
            center: ['50%', '75%']

数据只有一个值：

        data: [
            ['Firefox',   45.0]
        ]

并且工具提示更改为显示45％而不是100％

    tooltip: {
        pointFormat: '{series.name}: <b>{point.y:.1f}%</b>'
    },

更新：使用来自@Mark的想法使用输入data计算endData （参见Mark在他的回答中的评论）。 为startAngle添加了变量。 请参阅jsfiddle的更新：

var data = 45;
var startAngle = -90;
var endAngle = (data/100 * 180) + startAngle;
endAngle = endAngle == 0 ? 0.01 : endAngle;
...
            startAngle: startAngle,
            endAngle: endAngle,
...
        data: [
            ['Firefox',   data]
...

Answer 2

不要偷走@AntoJurković的雷声，但他在评论中的想法是实现你想要的最简单的方法。

这里有一个例子小提琴 。

重要的部分是：

series: [{
        type: 'pie',
        name: 'Browser share',
        innerSize: '50%',
        data: [                
            {y: 45, name: 'Firefox'},
            {y: 55, color: 'transparent',dataLabels:{enabled: false}} // instead of the background color, use transparent, and disable dataLabels
        ]
  }]

和

   tooltip: {
        formatter: function(){
            if (this.point.color == "transparent") {
                return false; // suppress the tooltips if it has no color
            } else {                    
                return this.series.name + ':<b>' + this.point.percentage +'%</b>';
            }
        }
    },