如何根據新的Plotlines更新Highstock/Highcharts中的當前視圖？

Question

我有一個圖形，用戶可以通過單擊按鈕自行添加圖形。通常情況下，這些情節會添加到圖的當前視圖之外，這意味着用戶必須手動縮小以搜索他們添加的情節。 HighStock是否可以根據添加的曲線動態更改其當前視圖？

這裏看看這個例子： http://jsfiddle.net/Ltgzwpo2/2/

如果你點擊按鈕，情節主線是外部加入的當前視圖，即你需要縮小找到情節主線。添加劇情圖時，圖表是否可以動態縮小？

這是我使用添加情節主線代碼：

$("#button").click(function() { 
    chart.xAxis[0].addPlotLine({ 
     value: Date.UTC(2015, 10, 5), 
     color: "green", 
     width: 1, 
     dashStyle: 'ShortDash', 
     label: { 
     text: "this appeared outside of the current view!", 
     align: 'left', 
     y: 5, 
     x: 3, 
     style: { 
      fontSize: "12px" 
     } 
     }, 
     zIndex: 10 
    }); 
    }); 

Answer 1

您可以使用axis.setExtremes()設置可視區域。

var value = Date.UTC(2015, 10, 5); 

chart.xAxis[0].addPlotLine({ 
    value: value, 
    color: "green", 
    width: 1, 
    dashStyle: 'ShortDash', 
    label: { 
    text: "this appeared outside of the current view!", 
    align: 'left', 
    y: 5, 
    x: 3, 
    style: { 
     fontSize: "12px" 
    } 
    }, 
    zIndex: 10 
}); 

var range = 1000 * 3600 * 24 * 30; 

chart.xAxis[0].setExtremes(value - range, value + range) 

例如：http://jsfiddle.net/cqwk84dz/