Chart.js очень медленный на 8 серий по 500+ очков

Question

Я пытаюсь построить 8 серий линейных графиков с помощью chart.js, но начальное рисование, включение / выключение серии, нажатие на легенду и / или добавление некоторых точек в серию - все происходит очень медленно. Занимает до 10 секунд иногда. Я пропускаю какое-то волшебное «свойство ускорения» в настройках или это нормально?

На самом деле мне нужно нарисовать и обновить в режиме реального времени около 10 серий по 2000 точек каждая, возможно ли это с некоторым разумным временем обновления?

Вот пример, с которым я играю: https://stackblitz.com/edit/angular-chartjs-ex

Answer 1

Применение параметров диаграммы, как описано в Высокопроизводительные линейные диаграммы - Ваш ванильный пример JS отображает диаграмму без заметных проблем с производительностью для меня в Firefox 67.

let labels = [];
let data1 = [];
let data2 = [];
for (let i = 0; i < 2000; i++) {
  labels.push("l" + i);
  data1.push(Math.floor(Math.random() * 100));
  data2.push(Math.floor(Math.random() * 100));
}
var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      //backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: data1
    }, {

      label: 'My First dataset',
      //backgroundColor: 'rgb(255, 255, 132)',
      borderColor: 'rgb(255, 255, 132)',
      data: data2

    }]
  },

  // Configuration options go here
  options: {
    animation: {
      duration: 0 // general animation time
    },
    hover: {
      animationDuration: 0 // duration of animations when hovering an item
    },
    responsiveAnimationDuration: 0, // animation duration after a resize
    elements: {
      line: {
        tension: 0 // disables bezier curves
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="canvas" height="450" width="600"></canvas>