HighCharts 半馅饼圈答案

【问题标题】：HighCharts Semi-Pie CircleHighCharts 半馅饼圈
【发布时间】：2014-02-01 09:46:11
【问题描述】：

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

这是我的jsfiddle link

【问题讨论】：

一种可能性是使用两个值：一个是 45%，另一个是 55%。并将颜色设置为与背景相同的 55% 值。
没有。那是行不通的。有更好的解决方案吗？

标签： javascript highcharts

【解决方案1】：

不要窃取@AntoJurković 的风头，但他在评论中的想法是实现您想要的最简单的方法。

这是一个例子fiddle。

重要的部分是：

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

【讨论】：

谢谢。有用。竖起大拇指。既然这是一个水平的半饼图，我可以把它做成垂直的吗？
但这仍然不道德，因为实际上存在另一个不应该存在的值 55。有没有标准的方法来做到这一点？
不道德？对于饼图的消费者（查看者）来说，没有值 55。您绝不会歪曲数据。我能看到做你想做的唯一其他方法是@AntoJurković 在下面建议的。但是正如您指出的那样，您必须为您的百分比计算适当的endAngle。
@Mark：很好的解决方案。您知道我必须使用哪个变量来计算答案中的endAngle 吗？这取决于系列数据值，在这种情况下为 45。
@AntoJurković，数学是var data = 45; var endAngle = (data/100 * 180) - 90; endAngle = endAngle == 0 ? 0.01 : endAngle; 0 检查是为了防止 endAngle 为 0，这似乎填充了整个 360 度。在此处更新小提琴：jsfiddle.net/W4r5N/2，请随时使用此信息更新您的答案。

【解决方案2】：

我不确定这是否是您想要的：参见示例 at 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 的想法计算endData，使用输入data（请参阅Mark 在他的回答中的评论）。还为 startAngle 添加了变量。见更新at 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]
...

【讨论】：

我知道工具提示值从 100 变为 45，但我真正关心的是，如果我提供任何值，它仍然会占用相同的空间，例如：- 如果提供 100 或 45，它将仍然呈现相同的饼图。除了工具提示值之外没有区别。我宁愿如果我提供值 20，那么图表应该只呈现 20%，如果是 100，那么应该是完整的 100%。这种事情会发生吗？