javascript - 向 highcharts.js 时间序列图添加一个简单的特征

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);
    }
}

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

现在，您会注意到，随着时间的推移，随着 lowestValue 的值越来越接近 0，您的绘图线出现的频率可能会降低。如果您更愿意显示最低值在任何给定时间图表中可见的点中，我建议添加一个计数器来跟踪自添加最后一条绘图线以来添加的点数。然后，如果最低点(及其绘图线)移出图表，将 lowestValue 重置为 10，这样最低的visible 点就是获得绘图线的点.

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