javascript - Vertical line on highchart, with position tied to animation frame from another div? - Stack Overflow

admin管理员组

文章数量:1415467

I have a 100-frame animation in one div and a standard area highchart in another div, with 100 positions on the x-axis. On the chart I can display a vertical line that tracks mouseovers, using this code:

  tooltip: {
    shared: true,
    crosshairs: true
  }

I'd like to create the identical type of line but have its placement tied to the animation frame. That is, as the animation progresses, the line on the chart would move to the matching position (if the animation is on frame 33, the line would move to position 33 on the x-axis of the chart).

How can I make this happen?

I'd like to simply update the value of the plotLine rather than add/remove each time, but I don't see an Axis.updatePlotLine or equivalent. If there is a way to do that, please let me know!

I have a 100-frame animation in one div and a standard area highchart in another div, with 100 positions on the x-axis. On the chart I can display a vertical line that tracks mouseovers, using this code:

  tooltip: {
    shared: true,
    crosshairs: true
  }

I'd like to create the identical type of line but have its placement tied to the animation frame. That is, as the animation progresses, the line on the chart would move to the matching position (if the animation is on frame 33, the line would move to position 33 on the x-axis of the chart).

How can I make this happen?

I'd like to simply update the value of the plotLine rather than add/remove each time, but I don't see an Axis.updatePlotLine or equivalent. If there is a way to do that, please let me know!

• javascript
• highcharts

Share Improve this question Follow edited May 20, 2016 at 13:58 Veve 6,76855 gold badges4343 silver badges6262 bronze badges asked May 19, 2012 at 22:52 vulturevulture 76122 gold badges77 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You could a second series as a vertical line and then manipulate that series with a setTimeout and setData call to match the frame speed of your animation (or even better trigger the moving of the line from the animation as it advances to the next frame).

See fiddle 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);

});​

You can use plotLines like you have discovered, but can avoid the add/remove line approach and rely on Highchart's renderer to animate an existing line. See this fiddle.

Relevant code:

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

I was able to make this work using plotLines (http://www.highcharts./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);
}

本文标签：