highcharts 使用2组数据的图表，每组数据都有自己的阈值

l7wslrjt 于 2023-06-23 发布在 Highcharts

关注(0)|答案(1)|浏览(165)

在HighCharts折线图中，我如何根据与阈值相关的值设置系列线的颜色。
请看下面的图片来了解我的需求。

我试图弄清楚如何使用存储在json对象中的两组数据来创建一个线图。每组数据都有自己的阈值。

<pre><code>
Highcharts.chart('container', {
    series: [
    {
        data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
        threshold: 5,
        negativeColor: 'green',
        color: 'red',
        tooltip: {
            valueDecimals: 2
        },
        zones: [{
            value: 0,
            color: '#f7a35c'
        }, {
            value: 10,
            color: '#7cb5ec'
        }, {
            color: '#90ed7d'
        }]
    },
    {
        data: [-9, -6, 1, 6, 11, 16, 11, 11, 6, 1, -4],
        threshold: 10,
        negativeColor: 'red',
        zones: [{
            value: 5,
            color: 'cyan'
        }, {
            value: 12,
            color: 'magenta'
        }, {
            color: 'green'
        }]
    }]
});
</pre></code>

highcharts

来源：https://stackoverflow.com/questions/76423996/graph-using-2-sets-of-data-which-each-one-with-its-own-threshold

1条答案

按热度按时间

z9smfwbn1#

没有这样的API选项，所以你可以在这里投票支持这个功能请求：https://github.com/highcharts/highcharts/issues/13986
作为一种解决方法，您可以使用以下代码，其中新的区域数组是基于提供的阈值创建的。

chart: {
    events: {
      load() {
        function checkRange(number, rangeStart, rangeEnd) {
          if (number >= rangeStart && number <= rangeEnd) {
            return true;
          } else {
            return false;
          }
        }

        let chart = this;
        chart.series.forEach(series => {
          let newZones = [];

          for (let i = 0; i < series.zones.length; i++) {

            if (checkRange(series.zones[i].value, -Infinity, series.options.threshold)) {
              newZones.push({
                value: series.options.threshold,
                color: series.options.negativeColor
              }, {
                value: series.zones[i + 1].value,
                color: series.zones[i].color
              })
            } else {
              newZones.push({
                value: series.zones[i].value,
                color: series.zones[i].color
              })
            }
          }
          series.update({
            zones: newZones
          }, false)
        })

        chart.redraw()
      }
    }
  },

演示：https://jsfiddle.net/BlackLabel/1nrta4vu/

赞(0）回复(0）举报 2023-06-23

我来回答

highcharts 使用2组数据的图表，每组数据都有自己的阈值

1条答案

相关问题

热门标签

最新问答