2

1 つの div に 100 フレームのアニメーションがありarea、別の div に標準のハイチャートがあり、x 軸に 100 の位置があります。次のコードを使用して、マウスオーバーを追跡する垂直線をグラフに表示できます。

  tooltip: {
    shared: true,
    crosshairs: true
  }

同じタイプの線を作成したいのですが、その配置をアニメーション フレームに結び付けます。つまり、アニメーションが進行するにつれて、チャート上の線は一致する位置に移動します (アニメーションがフレーム 33 にある場合、線はチャートの x 軸上の位置 33 に移動します)。

どうすればこれを実現できますか?

毎回追加/削除するのではなく、単に plotLine の値を更新したいのですが、Axis.updatePlotLineまたは同等のものは表示されません。その方法があれば教えてください！

4

3 に答える 3

3

2 番目のシリーズを垂直線として作成し、そのシリーズを setTimeout および setData 呼び出しで操作して、アニメーションのフレーム速度に一致させることができます (または、次のフレームに進むときにアニメーションから線の移動をトリガーすることをお勧めします)。

ここでフィドルを参照してください。

$(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);

});​
于 2012-05-20T15:51:13.430 に答える
0

plotLines（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);
}
于 2012-08-24T19:44:07.757 に答える