Блог

Главная - Вопросы по программированию - Chart.js перерисовать диаграмму, для которой выполняется рендеринг

Chart.js перерисовать диаграмму, для которой выполняется рендеринг

#javascript #charts #chart.js2 #chart.js3

#javascript #Диаграммы #chart.js2 #chart.js3

Вопрос:

Я использую chart.js 3.x библиотеку JavaScript для отображения диаграмм.
Мне нужно обновить диаграмму, для которой выполняется рендеринг.
Я использую JavaScript Worker для обновления данных диаграммы.

 for (var index=0;index < myjson.length;index  ) {           
    chart.data.datasets[index].data.push(myjson[index]);
}
chart.update();

Я делаю что-то вроде приведенного ниже, чтобы очистить набор данных диаграммы.

 // Set the empty data and render the chart to clear the data 
for (var index=0;index < chart.data.datasets.length;index  ) {           
    chart.data.datasets[index].data = [];
}
chart.update();

Но я вижу, что несколько строк все еще находятся на графике и не очищены должным образом.
Возможно, причиной этой проблемы является непрерывное рисование.
Я также пытался clear() и reset() диаграмму, но никакого эффекта.
Итак, как правильно очистить данные диаграммы и перерисовать новый набор данных.

Ответ №1:

используется stop() для завершения текущего цикла анимации,
затем очистки данных и обновления диаграммы без анимации.

смотрите следующий рабочий фрагмент,
как только прогресс анимации достигает 50%,
анимация останавливается, данные очищаются, и диаграмма обновляется без анимации…

 $(document).ready(function() {
  var offset = [100, 100, 100, 100];
  var data = [7900, 5400, 4300, 4300];
  var ctx = document.getElementById('bar-chart');
  var data = {
    labels: ['June 9', 'June 11', 'June 13', 'June 15'],
    datasets: [{
      data: offset,
      backgroundColor: 'transparent'
    }, {
      data: data.map(function (value, index) {
        return value - offset[index];
      }),
      backgroundColor: 'orange'
    }]
  }
  var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
      animation: {
        onProgress: function(animation) {
          var progress = animation.currentStep / animation.numSteps;

          // determine if progress is above 50%
          if (progress >= 0.5) {

            // stop current animation loop
            animation.chart.stop();

            // remove labels and data
            for (var i = chart.data.labels.length - 1; i >= 0; i--) {
              animation.chart.data.labels.pop();
            }
            for (var i = chart.data.datasets.length - 1; i >= 0; i--) {
              animation.chart.data.datasets.pop();
            }

            // update without animation
            animation.chart.update(0);
          }
        }
      },
      legend: {
        display: false
      },
      tooltips: {
        enabled: false
      },
      scales: {
        yAxes: [{
          stacked: true
        }]
      }
    }
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="bar-chart"></canvas>

Комментарии:

1. спасибо, но для моей диаграммы у меня animation установлено значение false . Я пытаюсь, chart.clear() и chart.stop() иногда это останавливает рендеринг, и я вижу обновленную диаграмму с самого начала, но иногда это не удается.

2. Я использовал анимацию здесь только для формирования примера. но как вы вмешиваетесь в операцию рендеринга, если вы не используете анимацию? разве она не будет отображаться синхронно с анимацией, имеющей значение false?

3. Поскольку текущие данные обновляются на диаграмме, для обеспечения оптимальной производительности я отключил анимацию в конфигурации диаграммы. Я добавил проверку внутри цикла, в который я помещаю данные внутри chart.data.dataset . Если этот флаг имеет значение true, я не отправляю данные, а очищаю данные, которые находятся в наборе данных, установив его chart.data.dataset[0].data = [] , и я вызываю chart.update(0) . Таким образом, это работает, но иногда я вижу, что диаграмма не очищается должным образом, и некоторые данные / строки находятся на диаграмме.

4. можете ли вы поделиться процедурой цикла?