2

我在一个 div 中有一个 100 帧的动画，area在另一个 div 中有一个标准的高图，在 x 轴上有 100 个位置。在图表上，我可以使用以下代码显示一条跟踪鼠标悬停的垂直线：

  tooltip: {
    shared: true,
    crosshairs: true
  }

我想创建相同类型的线条，但它的位置与动画帧相关联。也就是说，随着动画的进行，图表上的线条将移动到匹配的位置（如果动画在第 33 帧，线条将移动到图表 x 轴上的位置 33）。

我怎样才能做到这一点？

我想简单地更新 plotLine 的值，而不是每次都添加/删除，但我没有看到一个Axis.updatePlotLine或等价的。如果有办法做到这一点，请告诉我！

4

3 回答 3

3

您可以将第二个系列作为垂直线，然后使用 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 回答
1

您可以像您发现的那样使用 plotLines，但可以避免添加/删除线的方法并依靠 Highchart 的渲染器为现有线设置动画。看到这个小提琴。

相关代码：

$(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.
    });
});
于 2015-04-28T16:39:19.903 回答
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 回答