Higcharts“ negativeColor”中的极坐标图无法正确显示

Question

我有此极坐标图，该极谱图每2秒通过函数填充一次新数据。

我要实现的目标：

基于每3º的120个值显示线/面系列（在img“ Layer1”，“第2层的列”和“总计”中获得120个值，而“ Line”每45º仅具有8个值） 。

每次值超过限制（我使用“阈值：500”）时，该点都必须变成“红色”（我将其设置为“ negativeColor”）

我的问题是：

1. 传递值时，它不会使线变成红色，而只是点。
2. 这条线存在问题...因为如果我的值在圆的下半部分以下，则根本不显示任何线，而只是点（这是一条线都没有关系，或arearange类型系列）。像这样：

。

我的代码：

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

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