javascript - 即使阈值高于 HighStock 中的最大 y 轴值，也显示阈值线

Question

单击此处获取 fiddle link

 yAxis: {
      title: {
        text: 'Temperature (°C)'
      },
      plotLines: [{
        value: thresholdvalue,
        color: 'green',
        dashStyle: 'shortdash',
        width: 2,
        label: {
          text: 'Last quarter minimum'
        }
      }]
    },

当我点击一维范围选择器时，阈值为 19，但 y 轴的最大值为 15.7，这就是未显示绘制的阈值线的原因。

是否可以在任何情况下显示阈值线，无论阈值是否在范围内。

谢谢你的帮助。

Answer 1

您可以计算给定范围(包括您的阈值)的 Y 轴的最小值和最大值。然后将 min 和 max 传递给 yAxis.update()。

更新:

您可以在处理 load 事件时触发范围选择事件，如下所示:this.rangeSelector.clickButton(3)，其中 3是您要在范围选择器中触发的按钮的索引(在本例中为 1 个月)。

工作示例:

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=large-dataset.json&callback=?', function(data) {

  // Create a timer
  var start = +new Date();
  var thresholdvalue = 30;
  var _fullData = data;

  // Create the chart
  Highcharts.stockChart('container', {
    chart: {
      events: {
        load: function() {
          this.setTitle(null, {
            text: 'Built chart in ' + (new Date() - start) + 'ms'
          });
          this.rangeSelector.clickButton(3)
        }
      },
      zoomType: 'x'
    },

    rangeSelector: {

      buttons: [

        {
          type: 'day',
          count: 1,
          text: '1D'
        }, {
          type: 'day',
          count: 3,
          text: '3d'
        }, {
          type: 'week',
          count: 1,
          text: '1w'
        }, {
          type: 'month',
          count: 1,
          text: '1m'
        }, {
          type: 'month',
          count: 6,
          text: '6m'
        }, {
          type: 'year',
          count: 1,
          text: '1y'
        }, {
          type: 'all',
          text: 'All'
        }
      ],
      selected: 3
    },
    xAxis: {
      events: {
        setExtremes: function(e) {
          if (e.trigger == "rangeSelectorButton") {
            var series = this.chart.series[0];
            var yAxis = this.chart.yAxis[0];
            var threshold = thresholdvalue;
            
            //I can't see _fullData here without doing this
            var all_data = _fullData; 
            
            //Calculate values for a given range
            //Use floor() here, just to be sure that indeses passed to slice() are integers
            var values = all_data.data.slice(
            		Math.floor((e.min - all_data.pointStart) / all_data.pointInterval),
                Math.floor((e.max - all_data.pointStart) / all_data.pointInterval) + 1 
            );
            //Add threshold value to the array
            values.push(thresholdvalue);
            //Calculate min and max including threshold
						let minY = Math.min.apply(null, values);
            let maxY = Math.max.apply(null, values);
            series.update({
              threshold: threshold
            }, false);
            yAxis.update({
              plotLines: [{
                //value: threshold,
                value: threshold,
                color: 'green',
                dashStyle: 'shortdash',
                width: 2,
                visible: true,
                label: {
                  text: 'Last quarter minimum'
                }
              }],
              //Add min and max to the graph
              min: minY,
            	max: maxY
            });
          }
        },
      }
    },

    yAxis: {
      title: {
        text: 'Temperature (°C)'
      },
      plotLines: [{
        value: thresholdvalue,
        color: 'green',
        dashStyle: 'shortdash',
        visible: true,
        width: 2,
        label: {
          text: 'Last quarter minimum'
        }
      }]
    },

    title: {
      text: 'Hourly temperatures in Vik i Sogn, Norway, 2009-2015'
    },

    subtitle: {
      text: 'Built chart in ...' // dummy text to reserve space for dynamic subtitle
    },

    series: [{
      name: 'Temperature',
      data: data.data,
      pointStart: data.pointStart,
      pointInterval: 3600000,
      tooltip: {
        valueDecimals: 1,
        valueSuffix: '°C'
      },
      negativeColor: 'red',
      threshold: thresholdvalue
    }]

  });

});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>