饼状图，其中包含已填充的切片百分比答案

【问题标题】：Pie-like chart with a percentage of the slices being filled饼状图，其中包含已填充的切片百分比
【发布时间】：2017-07-03 23:09:28
【问题描述】：

我正在尝试制作图表，有点像饼图，但每个切片的大小相同，并且填充了一定百分比。
像this 这样的东西。

我的问题与此类似：Pie chart with different fill percentage.
但它已经 4 岁了，所以我想我会再问一次。

我尝试过使用 Canvasjs、Google 图表和 highcharts，但它们都不支持类似的东西。我还希望将切片用作可以旋转图表的按钮，将选定的切片放置在底部。

【问题讨论】：

标签： javascript css charts highcharts pie-chart

【解决方案1】：

您可以在 Highcharts 中实现该结果。每个切片应该是具有不同size 的不同系列。每个系列都应该有系列数中的点，除了一个之外，所有点都应该是不可见的 - 此外，禁用ignoreHiddenPoint 需要它，因此将绘制空白空间。

例如，您有一个点数组['20%', '30%'] - 您需要将点映射到系列数组：

[{
  size: '20%',
  keys: ['y', 'visible'],
  data: [[1/2, true], [1/2, false]]
}, {
  size: '30%',
  keys: ['y', 'visible'],
  data: [[1/2, false], [1/2, true]]
}]

您还可以创建一个附加系列作为饼图的背景

const backgroundSeries = [{
  size: '100%',
  data: [{y: 1, color: 'rgba(0, 0, 0, 0.4)'}],
  enableMouseTracking: false,
  borderWidth: 0,
}];

要旋转饼图，您需要更新startAngle 属性

chart.update({
  plotOptions: {
    pie: {
      startAngle: startAngle
    }
  }
});

实时示例和输出

http://jsfiddle.net/1yjc4ogb/

【讨论】：