没有所有切片的高图甜甜圈图表

时间:2016-11-06 19:33:13

标签: javascript highcharts donut-chart

我正在做简单的圆环图表,因为他们在系列中有一个单一的数据点,而不是填充整体。目前我正在将第二个数据点放入系列中作为空白区域,但这有一些需要隐藏工具提示和突出显示的缺陷。对此最好的方法是什么?我假设我可以设置图表的总值,但我无法在任何地方的文档中找到它。

1 个答案:

答案 0 :(得分:1)

在饼图系列中,总值是通过对所有点的值求和来计算的。

因此,根据您的点的值以及切片的大小,添加第二个点,使其不可见并将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也有一个仪表图表,所以也许这就是你要找的 - 没有调整饼图。