Javascript 向highcharts.js时间序列图添加简单功能

我发现了这个实时更新的时间序列图，我正在尝试添加一个简单的功能。我想在图表的最低点添加一条垂直线。我找到了一些添加垂直线的代码，但我不确定如何找到最低点，而不是更新图表。看这个，我感觉我很接近

添加垂直线的Highcharts.js代码

 xAxis: {
       type: 'datetime',
        tickPixelInterval: 150,
        plotLines: [{ // this code adds a vertical line 
          color: '#FF0000', // Red
          width: 2,
          value: (new Date).getTime() // Position, you'll have to translate this to the values on your x axis
        }]
  },

---

这是一个我喜欢研究的真正有价值的问题。我做了一些调查，发现了一种方法，可以在生成时间序列中迄今为止的最低值时添加一条绘图线

首先，我在图表选项之外设置了一个名为

lowestValue

的变量。将新点添加到序列中时，将使用和检查此变量

// make the initial value higher that the possible maximum y value
var lowestValue = 10;

接下来，我在图表事件中添加了一些代码，检查生成的新

y

值是否低于当前值

lowestValue

。如果是，我们将在该点上添加一条新的绘图线

我还添加了代码来删除创建的最后一条绘图线（如果有），以清楚地显示到目前为止哪个点的值最低。执行此操作的关键是为要添加的绘图线提供一致的

id

。这样，

removePlotLine（）

函数就知道要删除哪个

events: {
    load: function () {

        // set up the updating of the chart each second
        var series = this.series[0];
        setInterval(function () {
            var x = (new Date()).getTime(), // current time
                y = Math.random();
            series.addPoint([x, y], true, true);

            // if the most recent point is lower than 
            // the last recorded lowest value, add a 
            // new plotline
            if (y < lowestValue) {
                lowestValue = y;
              var plotOption = {
                  color: '#FF0000',
                  width: 2,
                  value: x,
                  zIndex: 0,
                  id: 'thisPlotLine'
              };
             // remove the previous plot line
             series.xAxis.removePlotLine('thisPlotLine');
             // add the new plot line
             series.xAxis.addPlotLine(plotOption);
            }

        }, 1000);
    }
}

事件：{
加载：函数（）{
//设置图表的每秒更新
var系列=本系列[0]；
setInterval（函数（）{
var x=（新日期（））.getTime（），//当前时间
y=数学随机（）；
系列。添加点（[x，y]，真，真）；
//如果最近的点低于
//最后记录的最低值，添加一个
//新绘图线
如果（y<最低值）{
最低值=y；
变量plotOption={
颜色：“#FF0000”，
宽度：2，
值：x，
zIndex:0，
id:'此绘图线'
};
//删除上一条打印线
series.xAxis.removePlotLine（“thisPlotLine”）；
//添加新的打印线
series.xAxis.addPlotLine（plotOption）；
}
}, 1000);
}
}

我修改了你的小提琴以显示这些变化：

现在，您会注意到，随着时间的推移，

lowerstvalue

的值越接近0，打印线出现的频率就越低。如果您希望在任何给定时间显示图表中可见点的最低值，我建议添加一个计数器，跟踪自添加最后一条打印线以来添加的点数。然后，如果将最低点（及其绘图线）移出图表，则将

最低点值

重置回10，以便可见的最低点是获取绘图线的点

---

我希望这些信息对你有帮助

谢谢大家!！这是一个很好的答案，也是我一直在寻找的@我真高兴！如果您还有其他问题需要我帮忙，请告诉我。