HighStock (Highchart) Livingata может иметь точку анимации перемещения?

Question

Могу ли я поставить мигающий указатель в конце?
Или мне нужно использовать другой плагин?

Я хочу указатель, который следует за концом строки, как изображение.

Я хочу построить как бинарный вариант или эксперимент.

Вот мое простое демо:

$(function() {

  Highcharts.setOptions({
    global: {
      useUTC: false
    }
  });

  // Create the chart
  $('#container').highcharts('StockChart', {
    chart: {
      events: {
        load: function() {

          // set up the updating of the chart each second
          var series = this.series[0];

          var hasPlotLine = false,
            $button = $('#button'),
            chart = $('#container').highcharts();

          setInterval(function() {

            chart.yAxis[0].removePlotLine('plot-line-1');

            var x = (new Date()).getTime(), // current time
              y = Math.round(Math.random() * 100);
            series.addPoint([x, y], true, true);

            chart.yAxis[0].addPlotLine({
              value: y,
              color: 'red',
              width: 2,
              id: 'plot-line-1'
            });
          }, 1000);
        }
      }
    },

    rangeSelector: {
      buttons: [{
        count: 1,
        type: 'minute',
        text: '1M'
      }, {
        count: 5,
        type: 'minute',
        text: '5M'
      }, {
        type: 'all',
        text: 'All'
      }],
      inputEnabled: false,
      selected: 0
    },

    title: {
      text: 'Live random data'
    },

    exporting: {
      enabled: false
    },

    series: [{
      name: 'Random data',
      data: (function() {
        // generate an array of random data
        var data = [],
          time = (new Date()).getTime(),
          i;

        for (i = -999; i <= 0; i += 1) {
          data.push([
            time + i * 1000,
            Math.round(Math.random() * 100)
          ]);
        }
        return data;
      }())
    }]

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

Также доступно на JsFiddle: Пример демонстрационной ссылки

Answer 1

Вы можете достичь требуемого результата, используя класс Highcharts. SVGRenderer. Вам нужно нарисовать путь и три круга и анимировать их, меняя их положение. Например:

chart: {
  events: {
    load: function() {
      // set up the updating of the chart each second
      var chart = this,
        series = chart.series[0],
        lastPoint = series.points[series.points.length - 1],
        xPos = lastPoint.plotX + chart.plotLeft,
        yPos = lastPoint.plotY + chart.plotTop,
        pointerSize = 16;

      var animatedPointGroup = this.renderer.g().attr({
        translateX: xPos - pointerSize / 2,
        translateY: yPos - pointerSize / 2
      }).add();

      var plotLine = this.renderer.path([
          'M', chart.plotLeft, yPos,
          'L', xPos, yPos
        ])
        .attr({
          stroke: '#008dc4',
          'stroke-width': 1
        })
        .add();

      var shadowCircle = this.renderer.circle(
        pointerSize / 2,
        pointerSize / 2,
        pointerSize
      ).attr({
        fill: '#d3d7de'
      }).add(animatedPointGroup);

      this.renderer.circle(
        pointerSize / 2,
        pointerSize / 2,
        6
      ).attr({
        fill: '#ffffff'
      }).add(animatedPointGroup);

      this.renderer.circle(
        pointerSize / 2,
        pointerSize / 2,
        3
      ).attr({
        fill: '#008dc4'
      }).add(animatedPointGroup);


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

        series.addPoint([x, y], true, true);
        point = series.points[series.points.length - 1];
        xPos = point.plotX + chart.plotLeft;
        yPos = point.plotY + chart.plotTop;

        animatedPointGroup.animate({
          translateX: xPos - pointerSize / 2,
          translateY: yPos - pointerSize / 2
        });

        plotLine.animate({
          d: [
            'M', chart.plotLeft, yPos,
            'L', xPos, yPos
          ]
        });

        shadowCircle.animate({
          r: shadowCircle.attr('r') === pointerSize ? pointerSize / 2 : pointerSize
        });
      }, 1000);
    }
  }
}

---

Демонстрационная версия: http://jsfiddle.net/BlackLabel/z4c0or3u/

Справочник по API:

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

https://api.highcharts.com/class-reference/Highcharts.SVGElement#animate

https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr