高图表为负值创造空间



使用高图表库创建饼图,但它在切片之间为负值创建空白空间。

我想删除该空白区域,并希望将负值显示为 0.0。

以下是我的代码。

  [http://jsfiddle.net/mukeshkumartech/xnxL3adL/][1]

通过这段代码,您可以看到"Firefox"的数据不会显示为 0.0,而不会创建 sapce。

您可以在将数据传递给图表构造函数之前准备数据,如下所示:

  data: [
    ['Firefox', -45.089],
    ['IE', 26.8], 
            ['Chrome:', -10],
    ['Safari', 8.5],
    ['Opera', 6.298],
    ['Others', 0.7]
  ].map(function(pointArr) {
    var newPoint = {
        name: pointArr[0]
      },
      value = pointArr[1];
    if (value < 0) {
      newPoint.y = 0;
      newPoint.negY = value;
    } else {
      newPoint.y = value
    }
    return newPoint;
  })

如果该值为负数,则我使用 0 作为 y 属性并将原始值保存在 negY 属性中,以便稍后在dataLabels.formater中使用它:

    dataLabels: {
      enabled: true,
      formatter: function() {
        console.log(this);
        var point = this.point;
        return this.key + " - value: " + (point.negY ? point.negY : point.y);
      }
    }

现场工作示例:http://jsfiddle.net/kkulig/6u7Lzfu9/

API 参考:https://api.highcharts.com/highcharts/series.pie.dataLabels.formatter

最新更新