highchart上的垂直線，位置與另一個div的動畫幀綁定？

Question

我在一個div中有一個100幀的動畫，在另一個div中有一個標準的area highchart，在x軸上有100個位置。在圖表I可以顯示跟蹤鼠標懸停的垂直線，使用此代碼：

tooltip: { 
    shared: true, 
    crosshairs: true 
    } 

我想創建相同類型的線，但具有其放置綁在動畫幀。也就是說，隨着動畫的進展，圖表中的線條將移動到匹配的位置（如果動畫在第33幀上，則線條將移動到圖表的x軸上的位置33）。

我該如何做到這一點？

我想簡單地更新plotLine的值而不是每次添加/刪除，但我沒有看到Axis.updatePlotLine或同等效果。如果有辦法做到這一點，請讓我知道！

Answer 1

我是能夠使使用的故事情節（http://www.highcharts.com/ref/#xAxis-plotLines）這項​​工作：

function addPlotLine(ts) { 
    chart.xAxis[0].addPlotLine({ 
    value: ts, 
    color: 'rgb(255, 0, 0)', 
    width: 1, 
    id: 'tsline' 
    }); 
} 

function removePlotLine() { 
    chart.xAxis[0].removePlotLine('tsline'); 
} 

function doAnimation(ts) { 
    // animation code here 
    removePlotLine(); 
    addPlotLine(ts); 
} 

Answer 2

您可以將第二個系列作爲垂直線，然後使用setTimeout和setData調用來處理該系列，以匹配動畫的幀速度（或者甚至更好地觸發從動畫前進到動畫的線的移動下一幀）。

看到小提琴here。

$(function() { 

    var someData = []; 
    var maxY = -9999, minY = 9999; 
    for (var i = 0; i < 60; i++) 
    { 
     var x = i; 
     var y = Math.random() * 10; 
     if (y < minY) minY = y; 
     if (y > maxY) maxY = y; 
     someData.push([x,y]); 
    } 

    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container' 
     }, 
     xAxis: { 
      minPadding: 0.05, 
      maxPadding: 0.05 
     }, 
     yAxis: {min: minY, max: maxY},   
     series: [{ 
      data: someData 
     }, 
     { 
      data: [[0,minY],[0,maxY]] 
     }] 
    }); 

    moveLine = function(){ 
     if (chart.series[1].data[0].x == 59){ 
      x = 0; 
     }else{ 
      x = chart.series[1].data[0].x + 1; 
     } 
     chart.series[1].setData([[x,minY],[x,maxY]]); 
     setTimeout(moveLine,1000); 
    } 

    setTimeout(moveLine,1000); 

});​ 

Answer 3

可以使用的故事情節像你所發現的，但可避免添加/刪除行方式，並依靠Highchart的渲染器爲現有線條添加動畫。見this fiddle。

相關代碼：

$(function() { 
    window.chart_instance = new Highcharts.Chart({ 
     yAxis: { 
      plotLines: [{ 
       color: '#777', 
       value: 55, 
       width: 1 
      }] 
     }, 
     chart: { 
      type: 'bar', 
      renderTo: $('#container')[0] 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4] 
     }] 
    }); 

    $("#btn").click(function(){ 
     var chart = chart_instance; 
     var axis = chart.yAxis[0]; // Get a reference to the Axis object that your plotline is associated with 
     var line = axis.plotLinesAndBands[0]; // Get a reference to the plotLine 
     line.options.value = 190; // Set desired new value 
     line.render(); // Render with updated values. Will animate if animation enabled for the chart. 
    }); 
});