Question

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

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
        }]
  },

Answer 1

这是一个我非常喜欢研究的真正有价值的问题。我做了一些调查，并发现了一种方法，只要生成时间序列中迄今为止的最低值，就可以添加一条情节。

首先，我在图表选项之外设置了一个名为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);
    }
}

我修改了你的小提琴以显示这些变化：http://jsfiddle.net/brightmatrix/pnL6xtLb/2/

现在，您会注意到，随着时间的推移，当lowestValue的值接近0时，您的情节线可能会更少出现。如果您更愿意在点中显示最低值在任何给定时间在图表中可见，我建议添加一个计数器，用于跟踪自添加最后一个绘图线以来添加的点数。然后，如果最低点（带有绘图线）移出图表，请将lowestValue重置为10，这样最低的可见点就是得到绘图线的点。

我希望这些信息对您有所帮助！

在highcharts.js时间序列图中添加一个简单的特征

1 个答案: