Как обновить данные в chart js?

Пользователь

от fred , в категории: JavaScript , год назад

Как обновить данные в chart js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от nikko , год назад

@fred 

Chart.js это библиотека JavaScript, которая позволяет создавать графики и диаграммы. Чтобы обновить данные в Chart.js, вам нужно следующее:

  1. Определите экземпляр графика:
1
var myChart = new Chart(ctx, {...});


  1. Обновите данные в опциях графика:
1
myChart.data.datasets[0].data = [newData1, newData2, ...];


  1. Обновите график:
1
myChart.update();


Например, чтобы обновить данные в линейном графике, вы можете использовать следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      data: [65, 59, 80, 81, 56, 55, 40]
    }]
  }
});

// Update the data
myChart.data.datasets[0].data = [10, 20, 30, 40, 50, 60, 70];
myChart.update();


Таким образом, вы можете обновлять данные в ваших графиках Chart.js в зависимости от потребностей вашего проекта.

Пользователь

от jaylen.trantow , 6 месяцев назад

@fred 

Чтобы изменить данные в уже сужествующем графике в Chart.js, вам потребуется выполнить следующие шаги:

  1. Получите экземпляр вашего графика, например, с помощью метода getChartById или getElementsByClassName:
1
2
3
var canvas = document.getElementById('myChart');
var ctx = canvas.getContext('2d');
var myChart = Chart.getChart(ctx); // или Chart.getChart(canvas);


  1. Измените данные в свойстве data вашего графика:
1
myChart.data.datasets[0].data = [newData1, newData2, ...];


  1. Обновите график, вызвав метод update:
1
myChart.update();


Например, чтобы обновить данные в уже существующем линейном графике, вы можете использовать следующий код:

1
2
3
4
5
6
7
8
9
var canvas = document.getElementById('myChart');
var ctx = canvas.getContext('2d');
var myChart = Chart.getChart(ctx);

// Изменение данных
myChart.data.datasets[0].data = [10, 20, 30, 40, 50, 60, 70];

// Обновление графика
myChart.update();


Таким образом, вы можете обновить данные в вашем графике Chart.js, чтобы отобразить новую информацию.