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

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

fred

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

66 | 0

chartjs

2 ответа

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

nikko

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

@fred

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

Определите экземпляр графика:

1	var myChart = new Chart(ctx, {...});

Обновите данные в опциях графика:

1	myChart.data.datasets[0].data = [newData1, newData2, ...];

Обновите график:

1	myChart.update();

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

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 в зависимости от потребностей вашего проекта.

1 | 0

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

jaylen.trantow

от jaylen.trantow , год назад

@fred

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

Получите экземпляр вашего графика, например, с помощью метода getChartById или getElementsByClassName:

1
2
3

var canvas = document.getElementById('myChart');
var ctx = canvas.getContext('2d');
var myChart = Chart.getChart(ctx); // или Chart.getChart(canvas);

Измените данные в свойстве data вашего графика:

1	myChart.data.datasets[0].data = [newData1, newData2, ...];

Обновите график, вызвав метод update:

1	myChart.update();

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

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, чтобы отобразить новую информацию.

0 | 0

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

2 ответа

Похожие обсуждения: