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

是否有可能在高品位中进行全定制点标记设计？

1 个答案: