馅饼图表，填充的切片百分比

Question

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

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

我尝试过使用Canvasjs，Google图表和highcharts，但没有一个支持类似的东西。我还希望切片能够作为可以旋转图表的按钮，让选定的切片位于底部。

Answer 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/