Próbowałem dostosować animację splajnu dla serii czasu (https://www.highcharts.com/ demo / dynamiczna aktualizacja) dla wielu serii. Zmodyfikowałem przykład tutaj 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;
    }())
}]
});

Niestety efekt jest nieparzysty, ponieważ jedna seria porusza się gładka, podczas gdy druga nie ... jak mogłem rozwiązać ten problem?

Dzięki

0
cflayer 5 październik 2020, 11:35

1 odpowiedź

Najlepsza odpowiedź

To dlatego, że wykres jest przerywany dwukrotnie. Wyłącz redraw w pierwszym {x0}} Wywołanie metody.

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

Live Demo: https://jsfiddle.net/blacklabel/0n2yw57m/.

API Reference: HTTPS: //api.highcharts. COM / Class-Fiveress / Highcharts.Series # Addpoint

0
ppotaczek 5 październik 2020, 09:25