Блог

Я пытался адаптировать анимацию сплайнов для временных рядов (https://www.highcharts.com/demo/dynamic-update ) для нескольких серий. Я изменил пример здесь https://jsfiddle.net/2wj3fquL /

    Highcharts.chart('container', {
   chart: {
    type: 'spline',
    animation: Highcharts.svg, // don't animate in old IE
    marginRight: 10,
    events: {
        load: function () {

            // set up the updating of the chart each second
            var series = this.series;
            setInterval(function () {
                var x = (new Date()).getTime(), // current time
                    y = Math.random();
                series[0].addPoint([x, y], true, true);
                        y = Math.random();
                series[1].addPoint([x, y], true, true);
            }, 1000);
        }
    }
},

time: {
    useUTC: false
},

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

accessibility: {
    announceNewData: {
        enabled: true,
        minAnnounceInterval: 15000,
        announcementFormatter: function (allSeries, newSeries, newPoint) {
            if (newPoint) {
                return 'New point added. Value: '   newPoint.y;
            }
            return false;
        }
    }
},

xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
},

yAxis: {
    title: {
        text: 'Value'
    },
    plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
    }]
},

tooltip: {
    headerFormat: '<b>{series.name}</b><br/>',
    pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},

legend: {
    enabled: false
},

exporting: {
    enabled: false
},

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

        for (i = -19; i <= 0; i  = 1) {
            data.push({
                x: time   i * 1000,
                y: Math.random()
            });
        }
        return data;
    }())
}, {
    name: 'other data',
    data: (function () {
        // generate an array of random data
        var data = [],
            time = (new Date()).getTime(),
            i;

        for (i = -19; i <= 0; i  = 1) {
            data.push({
                x: time   i * 1000,
                y: Math.random()
            });
        }
        return data;
    }())
}]
});
  

К сожалению, эффект странный, поскольку одна серия движется плавно, а другая — нет …
Как я мог решить эту проблему?

Спасибо

Это потому, что диаграмма перерисовывается дважды. Отключите перерисовку при первом addPoint вызове метода.

 events: {
  load: function() {
    ...
    setInterval(function() {
      ...
      series[0].addPoint([x, y], false, true);
      series[1].addPoint([x, y], true, true);
    }, 1000);
  }
}
  

Живая демонстрация: https://jsfiddle.net/blackLabel/0n2yw57m/

Ссылка на API: https://api.highcharts.com/class-reference/Highcharts.Серия #addPoint