Попытка использовать HighCharts для построения твердотельной диаграммы с несколькими слоями

Question

Я пытаюсь построить диаграмму, подобную этой:

Визуальная диаграмма

Но главная задача - добавить две разные серии, которые дополняют друг друга.

Я действительно ценю любую помощь, которую кто-то может мне оказать.

Большое спасибо заранее.

Answer 1

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

Во-первых, вы должны определить свой массив данных так:

var data = [40, 30, 10, 20]

Затем определите конфигурацию вашей диаграммы, и внутри обработчика функции chart.events.load поместите всю логику создания желаемого эффекта.

Следующий шаг - это итерация по всем data позициям, и создайте свою собственную конкретную точку, серию, yAxis и pane, основываясь на расчетах, подобных приведенным ниже:

  load() {
    var chart = this,
      series = [],
      panes = [],
      yAxes = [],
      radius = 112,
      innerRadius = 88,
      pointAngle,
      prevPointAngle = 0,
      pointPadding = (radius - innerRadius) / 4,
      colors = Highcharts.getOptions().colors,
      additionalPointPadding = 2;

    data.forEach(function(p, i) {
      pointAngle = (p * 360) / 100 // Calculate point angle

      // Prepare pane for each point
      panes.push({
        startAngle: prevPointAngle + pointPadding + additionalPointPadding,
        endAngle: (pointAngle + prevPointAngle) - pointPadding - additionalPointPadding,
        background: [{
          backgroundColor: '#fff',
          borderWidth: 0
        }]
      })
      // Prepare yAxis for specific pane
      yAxes.push({
        min: 0,
        max: 100,
        lineWidth: 0,
        tickPositions: [],
        pane: i
      })
      // Prepare series with specific point
      series.push({
        name: 'Exercise ' + i,
        data: [{
            color: colors[i],
          radius: radius + '%',
          innerRadius: innerRadius + '%',
          y: 100,
          percents: p
        }],
        yAxis: i
      })
      prevPointAngle += pointAngle
    })

И, наконец, обновите наш график новыми объектами:

    chart.update({
      pane: panes,
      yAxis: yAxes,
      series: series
    },true, true)

Последнее, что вам нужно знать, это конфигурация вашего графикадолжно иметь такое же количество пустых объектов в массиве pane, как и позиции данных, например:

var data = [10, 80, 10]
(...)
pane: [{},{},{}]

Вот пример, который показывает конечный эффект: https://jsfiddle.net/yamu5z9r/

KindС уважением! * * 1023