根据ajax更新和Highcharts中的数据点动态调整Y轴的最小值/最大值

Question

当前，创建了我的图形，然后进行了以下ajax调用，在该图形上创建了plotLines：

             $.ajax({
                type: "GET",
                url: "/limits",
                dataType: 'json',
                success: function (limits) {
                    console.log(limits);
                    graph1.yAxis[0].update({
                        plotLines: [{
                            value: limits[7].max,
                            color: 'orange',
                            dashStyle: 'dash',
                            width: 2,
                            label: {
                                text: 'USL'
                            }
                        }, {
                            value: limits[7].min,
                            color: 'orange',
                            dashStyle: 'dash',
                            width: 2,
                            label: {
                                text: 'LSL'
                            }
                        }]
                    });

问题是，对于某些图形，plotLines不在确定的y轴范围内的Highcharts图表（根据数据创建），因此plotLines不会显示在图形上。

我知道我可以这样做来解决该问题：

             $.ajax({
                    type: "GET",
                    url: "/limits",
                    dataType: 'json',
                    success: function (limits) {
                        console.log(limits);
                        graph1.yAxis[0].update({
                            min: limits[7].min,
                            max: limits[7].max,
                            plotLines: [{
                                value: limits[7].max,
                                color: 'orange',
                                dashStyle: 'dash',
                                width: 2,
                                label: {
                                    text: 'USL'
                                }
                            }, {
                                value: limits[7].min,
                                color: 'orange',
                                dashStyle: 'dash',
                                width: 2,
                                label: {
                                    text: 'LSL'
                                }
                            }]
                        });

但是，如果我要执行该解决方案，那么，如果图形在plotLines之外有点，则这些点将不会显示。

我想我可以做这样的事情：

chart: {
  events: {
    load: function() {
      var min = yAxis[0].min;
      var max = yAxis[0].max;
      if (limits[7].max > max) {
        yAxis[0].setExtremes(null, (limits[7].max);
      }
    }
  }
}

我不完全确定如何将最大和最小plotLines的这种逻辑类型合并到更新函数中。

任何帮助将不胜感激！谢谢。

Answer 1

您可以将标绘线的值与实际的轴极限值进行比较，并在必要时更改最小和最大属性。例如：

yAxis.update({
  min: yAxis.min > limits.min ? limits.min : null,
  max: yAxis.max < limits.max ? limits.max : null,
  plotLines: [{
    value: limits.max,
    width: 2,
    color: 'orange'
  }, {
    value: limits.min,
    width: 2,
    color: 'blue'
  }]
});

实时演示： http://jsfiddle.net/BlackLabel/6m4e8x0y/4989/