highcharts動態劇情

Question

我遇到一個問題，如何動態更新plotlines（on YAxis）？具體來說，我需要計算圖表一段時間內的最大值，最小值和平均值，然後設置它們代表的3條線。我怎樣才能做到這一點？ 非常感謝！

Answer 1

這是一個非常簡單的動態更新圖表的例子。

• 它有一個數據系列，可以通過按下按鈕來更新。
• 按下第二個按鈕時，根據系列的數據，繪圖將被添加或刪除+重新繪製。
• 如果要使用數據點的子集，請隨意相應地使用函數getKPIByData或更改data參數。

http://jsfiddle.net/hsL4pwsh/12/

;$(function() { 
    var curActiveData = 1; 
    var addedPlotlines = false; 
    var data1 = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]; 
    var data2 = [31.9, 73.5, 117.4, 29.2, 109.0, 181.0, 212.6, 137.5, 225.4, 199.1, 91.6, 11.4]; 
    var getKPIByData = function(data) { 
     function getMaxOfArray(numArray) { 
      return Math.max.apply(null, numArray); 
     } 
     function getMinOfArray(numArray) { 
      return Math.min.apply(null, numArray); 
     } 
     var minRate, 
      maxRate = 0, 
      rate, 
      i, 
      avgRate, 
      totalRate = 0; 
     for (i = 0; i < data.length; i++) { 
      totalRate += data[i]; 
     } 
     return { 
      minRate: getMinOfArray(data), 
      maxRate: getMaxOfArray(data), 
      avgRate: totalRate/data.length 
     }; 
    }; 
    $('#container').highcharts({ 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
     }, 
     series: [{ 
      data: data1 
     }] 
    }); 
    // the button action 
    var $button1 = $('#addPlotlines'), 
     $button2 = $('#updatePlotlines'), 
     chart = $('#container').highcharts(); 
    $button1.on("click", function() { 
     var curData = []; 
     for (var i = 0; i < chart.series[0].data.length; i++) { 
      curData[curData.length] = chart.series[0].data[i].y; 
     } 
     var result = getKPIByData(curData); 
     if (addedPlotlines) { 
      chart.yAxis[0].removePlotLine('min'); 
      chart.yAxis[0].removePlotLine('max'); 
      chart.yAxis[0].removePlotLine('avg'); 
     } 
     chart.yAxis[0].addPlotLine({ 
      color: 'green', 
      width: 2, 
      id: "min", 
      value: result.minRate 
     }); 
     chart.yAxis[0].addPlotLine({ 
      color: 'red', 
      width: 2, 
      id: "max", 
      value: result.maxRate 
     }); 
     chart.yAxis[0].addPlotLine({ 
      color: 'blue', 
      width: 2, 
      id: "avg", 
      value: result.avgRate 
     }); 
     addedPlotlines = true; 
    }); 
    $button2.on("click", function() { 
     var newActive = (curActiveData == 1) ? 2 : 1; 
     console.log(newActive); 
     chart.series[0].update({ 
      data: (newActive == 1) ? data1 : data2 
     }); 
     curActiveData = newActive; 
    }); 
});