Диаграмма пончиков HIghcharts без всех частей

Question

Я делаю простые кольцевые диаграммы, которые в большей степени служат подсказками, поскольку у них есть единственная точка данных в ряду, которая не заполняет целое. В настоящее время я помещаю в ряд вторую точку данных, чтобы действовать как пустое пространство, но в этом есть все подводные камни, необходимые для того, чтобы скрыть подсказки и выделения. Каков наилучший подход к этому? Я предполагал, что смогу установить общее значение графика, но нигде не смог найти его в документах.

Answer 1

В круговой серии общая стоимость рассчитывается путем суммирования значений всех точек.

Итак, основываясь на значении вашей точки и насколько большим должен быть срез, добавьте вторую точку, сделайте ее невидимой и установите ignoreHiddenPoint ложно.

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 также имеет диаграмму, так что, возможно, это то, что вы ищете - не нужно настраивать круговую диаграмму.