Полярная диаграмма в верхних чартах 'absoluteColor' не отображается должным образом

Question

У меня есть эта полярная диаграмма, которая заполняется каждые 2 секунды новыми данными с помощью функции.

Что я хочу достичь:

Отображение серии линий / областей на основе 120 значений для каждых 3º (в img 'Layer1,' Столбец для слоя 2)'и' Итого 'получают 120 значений, в то время как' Линия 'имеет только 8 значений на каждые 45º).

Каждый раз, когда значение превышает Предел (я использую «порог: 500,»), эту точку необходимо превратить в «красный» (я установил ее с помощью «absoluteColor»)

Моя проблема:

1. Когда значение передается, оно не делает линию красной, а только точку.
2. У нее такая проблема с линией..... потому что, если мои значения находятся под нижней половиной круга, они вообще не показывают никакой линии, только точки (не имеет значения, является ли это линией или серией типа rangerange).Вот так:

.

Мой код:

$(document).ready(
  function(datt) {
    chart = new Highcharts.chart('container', {
      chart: {
        polar: true,
        zoomType: 'xy'
      },
      pane: {
        startAngle: 0,
        endAngle: 360
      },
      credits: {
        enabled: false
      },
      title: {
        text: 'Polar distribution of layers thickness '
      },
      tooltip: {
        formatter: function() {
          return this.series.name + ' WT: ' + JSON.stringify(this.y / 35.5).slice(0, 6);
        }
      },
      xAxis: {
        min: 0,
        max: 360,
        tickInterval: 45,
        gridLineColor: 'white',
        gridZIndex: 5,
        labels: {
          formatter: function() {
            return this.value + " º";
          }
        }
      },

      yAxis: {
        min: 0,
        endOnTick: false,
        visible: false,
        maxPadding: 0,
        labels: {
          enabled: false
        },
      },
      plotOptions: {
        arearange: {
          marker: {
            enabled: false
          }
        }
      },
      series: [{
          type: 'arearange',
          name: 'Layer 1',
          data: datt,
          color: '#19dde8',
          fillOpacity: 0.5,
          lineWidth: 0.3,
          zIndex: 2
        },
        {
          type: 'arearange',
          name: 'Column for Layer 2',
          data: [
            [0, 419, 419],
            [45, 419, 419],
            [90, 419, 419],
            [135, 419, 419],
            [180, 419, 419],
            [225, 419, 419],
            [270, 419, 419],
            [315, 419, 419],
            [360, 419, 419]
          ],
          min: 400,
          color: '#e8d618',
          fillOpacity: 0.3,
          lineWidth: 0.3,
          threshold: 500,
          negativeColor: 'red'
        },
        {
          type: 'arearange',
          name: 'Total',
          data: [
            [0, 451, 451],
            [45, 451, 451],
            [90, 451, 451],
            [135, 451, 451],
            [180, 451, 451],
            [225, 451, 451],
            [270, 451, 451],
            [315, 451, 451],
            [360, 451, 451]
          ],
          lineWidth: 0.3,
          color: '#c8c5f9',
          fillOpacity: 0.5,
          lineWidth: 0.3,
          zIndex: 7,
        },
        {
          type: 'line',
          name: 'Line',
          data: [
            [0, 619],
            [45, 639],
            [90, 649],
            [135, 659],
            [180, 669],
            [225, 639],
            [270, 629],
            [315, 699],
            [360, 609]
          ],
          lineWidth: 0.3,
          color: 'orange',
          threshold: 650,
          negativeColor: 'red',
          fillOpacity: 0.5,
          lineWidth: 0.3,
          zIndex: 7,
        }


      ]
    });
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.2.0/es-modules/parts-more/Polar.js"></script>

<div id='container'></div>

Answer 1

К сожалению, свойство absoluteColor не работает должным образом в полярной диаграмме. Как вы можете видеть, об этом сообщается, и разработчик ядра Highcharts писал: «В качестве краткосрочного решения мы должны отключить зоны и absoluteColor для полярных диаграмм и указать это в документах». https://github.com/highcharts/highcharts/issues/4936.

Решение, которое я могу предложить для вас, состоит в том, чтобы использовать модуль Highcharts многоцветной серии http://blacklabel.github.io/multicolor_series/. Проверьте это демо с таблицей, аналогичной вашей: https://jsfiddle.net/Bastss/1c8mbu9e//

load() {
    let chart = this;
    chart.series.forEach((series) => {
      if (series.userOptions.type != 'arearange') {
        series.data.forEach((point) => {
          if (point.y < 650) {
            console.log(point)
            point.update({
              color: "red",
              segmentColor: "red"
            })
          }
        })
      }
    })
    chart.reflow();
  }
}