取决于y轴值的高线图更改十字准线的颜色

Question

我想根据值更改十字准线的颜色。我正在这样做，但是没有用。

xAxis: {
            type: 'datetime',
            crosshair: {
            threshold: 1,
            negativeColor: 'green',
            color: 'red',
            width: 1.5,
            snap: false
            }

因此，如果y轴的值小于1，我希望十字准线的颜色为绿色。但是它不起作用。任何帮助表示赞赏。

Answer 1

您尝试设置的选项在API中不存在-https://api.highcharts.com/highcharts/xAxis.crosshair.color

我认为最简单的方法是使用className属性并在tooltip.formatter回调中动态更改十字线样式。

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

  tooltip: {
    formatter(tooltip) {
      let chart = this.series.chart,
        crosshair = document.getElementsByClassName('custom-crosshair');

      if (crosshair[0]) {
        if (this.x > 4) {
          crosshair[0].style.stroke = 'green'
        } else {
          crosshair[0].style.stroke = '#cccccc'
        }
      }
      return tooltip.defaultFormatter.call(this, tooltip);
    }
  },

API：https://api.highcharts.com/highcharts/tooltip.formatter