Javascript Highcharts：每次单击按钮都会动态更新图表

注：我已经读过这个问题：

我想要达到的效果与此类似：。然而，我希望它不是每秒钟更新一次，而是每点击一个按钮就更新一次。到目前为止，我得到的是：

$（函数（）{
var chartData=[50,60,70,100,120,200]；
var时间戳=[]；
var指数=1；
$（'#b'）。单击（函数（）{
push（newdate（））；
var buttonB=document.getElementById（'b'）；
buttonB.disabled=true；
if（索引<图表数据长度）{
setTimeout（函数（）{
如果（索引==1）{
$（“#容器”）.highcharts（）.series[0].addPoint（[0，chartData[0]]，true，false）；
$（“#容器”）.highcharts（）.series[0].addPoint（[index，chartData[index]]，true，false）；
}否则{
$（“#容器”）.highcharts（）.series[0].addPoint（[index，chartData[index]]，true，true）；
索引++；
}
}, 1000);
}
如果（索引

为什么（几乎）相同的代码可以在图表自动更新的情况下工作，而不能在点击触发更新的情况下工作？

---

（我还尝试了代码控制更新不在“setTimeout”块中的函数，它也不起作用。）

您要做的是创建一个函数，将数据添加到序列中，如：

function addData(series, data) {
    series.addPoint([series.length, data], true, false);
}

例如，在

系列

的末尾添加一个值为

数据

的新点（索引的

系列.长度

，比系列的最后一个索引高一个索引）

然后可以将此函数绑定到按钮的单击事件：

$('#add-random-data').on('click', function () {
    addData(chart.series[0], Math.random());
});

这会将

0

和

1

之间的随机值添加到序列中。假设图表存储在名为

chart

的变量中，

series[0]

是要向其中添加数据的图表系列

这在给定的示例图表上显示了这一点

---

代码不起作用的原因是您设置了x轴的

min

和

max

，如注释中所述。这样，图表就不会绘制索引超出限制的数据。您只需删除

min

和

max

属性，即可让图表自动缩放其轴。如果希望x轴上的值始终介于

0

和

1

之间，则必须使用序列中的索引

0

和

1

覆盖点。

您的意思是：？如果这是你想要的，我可以在回答中向你解释它是如何实现的works@SimonH是的，没错。谢谢大家!@SimonHänisch您能在您的回答中告诉我为什么我的代码在中不起作用吗？我会看一看，在这里您可以看到如何制作图表的工作示例在您的示例中，您有xAxis的最小值和最大值，因此您无法看到超出此值的线。看看这个例子，如何“用索引0和1覆盖点”？我尝试在这个上下文中这样做（动态更新图表），但是，没有达到预期的效果。您可以使用该方法，也可以先从系列中删除以前的点。（感谢所有示例！）是否可以在单击botton之前在x轴上显示0？我建议阅读API文档，我以前从未与highcharts合作过，但他们告诉了我帮助您所需的一切；）=>您只需向序列中添加一些初始零值，如下所示：我想也可以（重新）绘制带有空数据的绘图/轴

$('#add-random-data').on('click', function () {
    addData(chart.series[0], Math.random());
});