Javascript highchart上的垂直线，位置绑定到另一个div的动画帧？

我在一个div中有一个100帧的动画，在另一个div中有一个标准的

区域

海图，在x轴上有100个位置。在图表上，我可以使用以下代码显示一条跟踪鼠标指针的垂直线：

  tooltip: {
    shared: true,
    crosshairs: true
  }

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

我怎样才能做到这一点

---

我只想更新绘图线的值，而不是每次添加/删除绘图线，但我看不到

Axis.updatePlotLine

或等效物。如果有办法，请告诉我

您可以将第二个系列作为垂直线，然后使用setTimeout和setData调用操纵该系列，以匹配动画的帧速（或者更好地在动画前进到下一帧时触发该系列的移动）

看小提琴

$（函数（）{
var someData=[]；
变量maxY=-9999，minY=9999；
对于（变量i=0；i<60；i++）
{
var x=i；
var y=Math.random（）*10；
如果（ymaxY）maxY=y；
someData.push（[x，y]）；
}
图表=新的高点图表。图表({
图表：{
renderTo:“容器”
},
xAxis：{
平均值：0.05，
最大填充：0.05
},
yAxis:{min:minY，max:maxY}，
系列：[{
数据：someData
},
{
数据：[[0，minY]，[0，maxY]]
}]
});
moveLine=函数（）{
if（chart.series[1]。数据[0]。x==59）{
x=0；
}否则{
x=图表。系列[1]。数据[0]。x+1；
}
chart.series[1].setData（[[x，minY]，[x，maxY]]）；
设置超时（移动线，1000）；
}
设置超时（移动线，1000）；
});​

您可以将第二个系列作为垂直线，然后使用setTimeout和setData调用来操纵该系列，以匹配动画的帧速（或者更好地触发动画中的线条移动到下一帧）

看小提琴

$（函数（）{
var someData=[]；
变量maxY=-9999，minY=9999；
对于（变量i=0；i<60；i++）
{
var x=i；
var y=Math.random（）*10；
如果（ymaxY）maxY=y；
someData.push（[x，y]）；
}
图表=新的高点图表。图表({
图表：{
renderTo:“容器”
},
xAxis：{
平均值：0.05，
最大填充：0.05
},
yAxis:{min:minY，max:maxY}，
系列：[{
数据：someData
},
{
数据：[[0，minY]，[0，maxY]]
}]
});
moveLine=函数（）{
if（chart.series[1]。数据[0]。x==59）{
x=0；
}否则{
x=图表。系列[1]。数据[0]。x+1；
}
chart.series[1].setData（[[x，minY]，[x，maxY]]）；
设置超时（移动线，1000）；
}
设置超时（移动线，1000）；
});​

我能够使用绘图线（）完成这项工作：

---

我能够使用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.
    });
});

---

您可以像发现的那样使用绘制线，但可以避免“添加/删除线”方法，并依靠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.
    });
});

---

谢谢你的回复。我提出了一个使用绘图线的解决方案（见上文）。如果您知道我关于更新绘图线的问题的答案，请告诉我。谢谢谢谢你的回复。我提出了一个使用绘图线的解决方案（见上文）。如果您知道我关于更新绘图线的问题的答案，请告诉我。谢谢

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