javascript - Highcharts 'negativeColor' 中的极坐标图未正确显示

Question

我有一个极坐标图，它每 2 秒由一个函数填充一次新数据。

我想要实现的目标:

显示线/面系列，基于 120 个值，每 3°(在图像“Layer1”、“Column for Layer 2”和“Total”中接收 120 个值，而“Line”每 45° 只有 8 个值) 。

每当一个值超过限制(我使用“阈值:500”)时，该点必须变成“红色”(我将其设置为“负颜色”)

我的问题是:

1. 传递值时，不会使线条变红，而只会使点变红。
2. 线条有这个问题......因为如果我的值在圆的下半部分之下，它根本不显示任何线条，只显示点(如果它是一条线并不重要) ，或区域范围类型系列)。像这样:

。

我的代码:

$(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

不幸的是，负颜色属性在极坐标图中无法正常工作。正如您所看到的，Highcharts 核心开发人员写道:“作为短期解决方案，我们必须禁用极坐标图的区域和负颜色，并在文档中指定。” 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();
  }
}