即使在HighStock中阈值高于最大y轴值，也要显示阈值线

Question

点击此处查看fiddle link

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

单击1D范围选择器时，阈值为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>