Javascript Highcharts从csv文件动态更新图表

我一直在研究这个问题 在highcharts文档页面上。在那里，他们使用

Math.random（）

更新数据并将其添加到序列中

从文档中，我还知道如何一次加载典型的所有文件（或使用以下优秀代码）：

)

我想做的是：

• 读取csv文件的一行
• 更新图表
• 暂停1秒钟
• 重做以上操作，直到文件结束

从而模拟实时应用程序

但是，我不能简单地将它放在

事件：load

下，因为无法跟踪以前读取过的行。 他们实时拉取数据的示例都使用某种api或websocket，这对我来说太高级了，无论如何在我的情况下都不可用。
假设我的csv文件如下所示：（）

t观察到
1   19
2   12
3   28
4   17
5   85
6   22
7   86
8   16
9   90
10  93
11  39
12  96
13  42
14  74
15  100
16  22
17  41
18  32

---

是否有一种相对简单的方法来执行上述步骤

为需要绘制的下一个数组索引维护一个变量怎么样

setInterval(function () {
    if(window.nextIndex===undefined){
        window.nextIndex=0;
    }else{
        window.nextIndex++;
    }                        
    series.addPoint(data[window.nextIndex], true, true);
}, 1000);

---

若您将使用在

setInterval

之外定义的迭代器对解析的数据数组进行迭代，那个么您可以在每次迭代中加载点。当迭代器达到可用数据长度时，可以使用

clearInterval

清除间隔

为了实现JSFIDLE演示，让我们从HTML加载CSV数据

---

基于您的代码的示例：

您能像样条曲线示例中那样执行吗？有了settimeout，他们就不用math.random来更新数据，他们用它来生成随机数据，settimeout就是更新它的东西。你能不能让我们看看你的图表现在看起来如何？他们用

setInterval

生成新数据，并每秒将其附加到序列中。我不能在这里这样做，因为我需要跟踪到目前为止已经阅读了哪些行。

事件：load

下的任何代码都无法保留以前操作的引用。我没有一个真正的工作小提琴，但这是最接近它：您可以从解析所有CSV数据到一个数组开始。接下来，该数组将在

setInterval

中迭代，直到添加所有数组，然后清除该间隔。在interval函数之外定义数组和迭代器，以便在所有迭代中都可以访问它。@KacperMadej感谢您的工作流程。我的js技能相当有限，你能在我的JSFIDLE中添加它的大纲吗？@Pep是的，我添加了一个演示作为答案-如果有什么不清楚的地方，请随时对答案发表评论。谢谢，这正是我需要的。有点不相关，但是否可以从此中删除缩放级别和“从”“到”？@Pep Yes，只需设置

rangeSelector:{enabled:false}，

-示例：

setInterval(function () {
    if(window.nextIndex===undefined){
        window.nextIndex=0;
    }else{
        window.nextIndex++;
    }                        
    series.addPoint(data[window.nextIndex], true, true);
}, 1000);