javascript - 是否可以在 highstock 中进行全定制点标记设计？

Question

我需要我的图表有一个脉动的最后一点。

我动态更新了图表http://jsfiddle.net/jswbouaa/

    chart: {
    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.round(Math.random() * 100);
                series.addPoint([x, y], true, true);
            }, 1000);
        }
    }
},

和一个 CSS 动画点 https://codepen.io/anon/pen/rpwqOg?editors=1100#0

是否可以在图表中实现这个动画点？

Answer 1

是的。请参阅此演示: http://jsfiddle.net/kkulig/zaeas1aw/

我使用 SVGRenderer.text() 创建了标记。然后我编写了名为 positionMarker 的函数，它负责更改标记的位置。我在数据初始设置后和每个点添加后调用一次:

function positionMarker(series) {
  var lastPoint,
    chart = series.chart,
    lastPoint = series.points[series.points.length - 1];

  chart.pulseMarker.animate({
    x: lastPoint.plotX - chart.plotLeft - chart.spacing[0],
    y: lastPoint.plotY + chart.plotTop + chart.spacing[2] - 3
  }, true);
}

(...)

  load: function() {

    var chart = this;
    chart.pulseMarker = this.renderer.text("<span class='mgo-widget-call_pulse'></span>", 200, 200, true).add();

    // set up the updating of the chart each second
    var series = this.series[0];
    // change the position of pulse marker                  
    positionMarker(series);


    setInterval(function() {
      var x = (new Date()).getTime(), // current time
        y = Math.round(Math.random() * 100);

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

      // change the position of pulse marker                    
      positionMarker(series);

    }, 1000);
  }
}

<小时/>

API引用: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text