HIghcharts甜甜圈图没有所有的切片

HIghcharts doughnut chart without all the slices

本文关键字：切片 甜甜圈 HIghcharts      更新时间：2023-09-26

我正在制作简单的甜甜圈图，它更像是一种语言，因为它们在系列中只有一个数据点，不能填充整个数据点。目前，我将第二个数据点放入该系列中作为空白区域，但这有需要隐藏工具提示和高亮显示的所有缺陷。最好的方法是什么?我以为我可以设置图表的总价值，但我在文档中找不到它。

在饼形序列中，总价值是通过将所有点的值相加来计算的。

因此，根据你的点的值和切片应该有多大，添加第二个点，使其不可见并将ignoreHiddenPoint设置为false。

series: [{
  type: 'pie',
  name: 'Brands',
  colorByPoint: true,
  ignoreHiddenPoint: false,
  data: [
  {
    y: 50,
    visible: false
  },
  50]
}]

示例:http://jsfiddle.net/41xqpnzf/1/

可选地，您可以更改updateTotals()行为并扩展它，因此您可以设置固定的总价值。

  Highcharts.seriesTypes.pie.prototype.updateTotals = function() {
var i,
  total = 0,
  points = this.points,
  len = points.length,
  point,
  ignoreHiddenPoint = this.options.ignoreHiddenPoint,
  fixedTotal = this.options.fixedTotal;
if (!Highcharts.isNumber(fixedTotal) || fixedTotal < 0) {
  // Get the total sum
  for (i = 0; i < len; i++) {
    point = points[i];
    // Disallow negative values (#1530, #3623, #5322)
    if (point.y < 0) {
      point.y = null;
    }
    total += (ignoreHiddenPoint && !point.visible) ? 0 : point.y;
  }
} else {
    total = fixedTotal;
}
this.total = total;
// Set each point's properties
for (i = 0; i < len; i++) {
  point = points[i];
  point.percentage = (total > 0 && (point.visible || !ignoreHiddenPoint)) ? point.y / total * 100 : 0;
  point.total = total;
}
};

然后在选项

series: [{
  type: 'pie',
  name: 'Brands',
  fixedTotal: 100,
  colorByPoint: true,
  data: [50]
}]

示例:http://jsfiddle.net/41xqpnzf/2/

Highcharts也有一个测量图，所以也许这就是你正在寻找的-不调整饼状图

相关文章：