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

Question

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

    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

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

Is it possible to make all-custom point marker design in highstock?

javascript

highcharts

highstock