javascript - 在 HighChart 的最新数据上显示 Marker 符号

Question

我正在尝试为我们的图表创建一个插件，该插件在数据流系列中的最后一个数据上显示一个标记。该符号应仅显示在最新数据上。我在这里了解到我可以扩展原型(prototype)并创建我的图表 Here喜欢

(function (H) {
    H.wrap(H.Chart.prototype, 'init', function(proceed) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
   };
   H.wrap(H.Chart.prototype, 'redraw', function(proceed, points) {
     proceed.apply(this, Array.prototype.slice.call(arguments, 1));
     //Add my marker symbol here
  });
}(Highcharts));

我测试了上面的两个事件，他们开始添加正确的时间。但是，我的观点是一个 bool 值，这不是我所期望的。我阅读了 api 文档 Here 但无法理解如何进行。如果有人有更好的例子或指导如何使用扩展并实现这一点，我们将不胜感激。我的数据是流式连续数据，需要仅在最新数据之上显示标记符号。

更新

谢谢楼主的回复。我们正在使用 react-highcharts，我注意到我无权访问图表加载事件。尽管如此，我注意到我可以按照说明扩展我的 H.Series 原型(prototype) Here并且我的事件会在每个新的刻度线油漆上触发。我现在将我的代码更新为

  H.wrap(H.Series.prototype, 'drawGraph', function (proceed) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        const { chart } = this;
        renderSpotIndicator(chart);
    });  
   function renderSpotIndicator(chart){
        const series = chart.series[0],
              len = series.data.length - 1,
              lastPoint = series.data[len];    
        if(lastPoint){
            lastPoint.update({
               marker: {
                enabled: true
               }
          });
        }

    }

当我运行时，我注意到我的标记属性在我的 lastPoint 中不存在，因此它会抛出错误。我无法使用它。我被建议改为绘制标记。以下示例 Here .我将代码更改为

function renderSpotIndicator(chart){
        const series = chart.series[0],
              len = series.data.length - 1,
              lastPoint = series.data[len];    
        if(lastPoint){
            chart.renderer.circle(lastPoint.pointX, lastPoint.pointY, 5).attr({
                            fill: lastPoint.color,
                            padding: 10,
                            r: 5,
                            stroke: 'white',
                            'stroke-width': 1,
                            zIndex: 5
                        }).add();
        }

    } 

上面也是抛出错误。当我检查时，我注意到自己圈出的属性在我的 lastPoint 上不可用。我的 lastPoint 返回正确，但我无法在特定点上设置标记，因为属性在 lastPoint 上不可用。先生，请提供任何帮助。

Answer 1

您可以编辑加载事件并提取系列的最后一个点。然后调用更新以显示标记。每次刷新图表(通过添加点)时，您都需要执行相同的步骤。提取最后一个点，更新标记(隐藏)，添加点并显示最后一个标记。

var series = this.series[0],
          len = series.data.length - 1,
          lastPoint = series.data[len];

        lastPoint.update({
          marker: {
            enabled: true
          }
        });
        setInterval(function() {
          var x = (new Date()).getTime(), // current time
            y = Math.random();

          len = series.data.length - 1;

          series.data[len].update({
            marker: {
              enabled: false
            }
          }, false);

          series.addPoint([x, y], true, true);

          len = series.data.length - 1;

          series.data[len].update({
            marker: {
              enabled: true
            }
          }, true);

        }, 1000);

例子:- http://jsfiddle.net/ga2sym0v/