如何将具有特定范围的阈值添加到 Highcharts 图表中？

Question

我正在制作 Highcharts 折线图，我需要在 x 轴上添加具有特定范围的阈值。我希望图表的某些区域根据这些阈值进行着色，以下是我的问题的详细信息： 我已经使用 Highcharts 中的区域配置选项来尝试实现此目的，但没有得到所需的结果。这是我到目前为止使用过的代码：

阈值：

Threshold 1:
    Value: 10°C
    Range: from 100 meters to 500 meters (on the x-axis)

Threshold 2:
    Value: 20°C
    Range: from 600 meters to 2682 meters (on the x-axis)

我想要：

Color the area between 100 meters and 500 meters red if the temperature is above 10°C.
Color the area between 600 meters and 2682 meters red if the temperature is above 20°C.
Display dashed lines at the thresholds of 10°C and 20°C.




  Highcharts.chart('container', {
  title: {
    text: 'Thermal Profile'
  },
  series: [
    {
      name: 'Temperature 0-10°C',
      data: [
        [0, 20.18], [1, 20.21], [2, 20.38], /* ... */ [99, 19.95] // Data filtered for temperatures below 10°C
      ],
      color: '#83c081', // Color for temperatures < 10°C
      zones: [
        {
          value: 10,
          color: '#83c081'
        }
      ]
    },
    {
      name: 'Temperature 10-20°C',
      data: [
        [100, 10.5], [101, 11.2], /* ... */ [499, 19.8] // Data filtered for temperatures between 10°C and 20°C
      ],
      color: '#dc0059', // Color for temperatures > 10°C and < 20°C
      zones: [
        {
          value: 20,
          color: '#dc0059'
        }
      ]
    },
    {
      name: 'Temperature 20-30°C',
      data: [
        [600, 21.5], [601, 22.0], /* ... */ [2682, 27.5] // Data filtered for temperatures between 20°C and 30°C
      ],
      color: '#83c081', // Color for temperatures > 20°C
      zones: [
        {
          color: '#83c081'
        }
      ]
    }
  ],
  xAxis: {
    title: {
      text: 'Distance (m)'
    },
    categories: ["0", "550", "1100", "1650", "2150", "2682"]
  },
  yAxis: {
    title: {
      text: 'Temperature (°C)'
    },
    plotLines: [
      {
        color: '#dc0059',
        dashStyle: 'Dash',  // Dashed line
        value: 10, // Threshold at 10°C
        width: 2,
        label: {
          text: 'Threshold 10°C',
          align: 'right'
        }
      },
      {
        color: '#dc0059',
        dashStyle: 'Dash',  // Dashed line
        value: 20, // Threshold at 20°C
        width: 2,
        label: {
          text: 'Threshold 20°C',
          align: 'right'
        }
      }
    ]
  },
  tooltip: {
    headerFormat: '<b>{point.x} m</b><br>',
    pointFormat: 'Temperature: {point.y} °C'
  }
});

Answer 1

我认为你已经非常接近解决方案了。我们只需要稍微调整一下区域，也许还可以添加一些点来更好地可视化区域的工作原理。在

zones.value

中，您可以定义点的着色值，如

zones.color

中指定的那样。较高的值将根据

series.color

着色。请查看演示并告诉我这是否是您想要实现的外观。

API 参考：https://api.highcharts.com/highcharts/plotOptions.series.zones

演示：https://jsfiddle.net/BlackLabel/ey0suh9a/