Chart.js как обновить график
Хочу вносить значения в ходе программы, но не могу понять как это сделать, т.е. я в принципе изменяю значения, но не могу обновить график чтобы он отобразился уже с новыми параметрами.
|
|
При попытке добавить данные через метод .addData появляется ошибка - Uncaught TypeError: chart.addData is not a function, что я делаю не так?
|
Merab,
сделайте макет. |
Merab,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
JavaScript - код
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: [0], // подписи снизу
datasets: [
{
label: labelEdit || "Популяция существ", // название
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgb(255, 99, 132)",
data: [0], // значения
},
],
},
// Configuration options go here
options: {},
});
btnNextStep.onclick = () => {
console.log(1);
chart.addData(40, 60);
chart.update();
};
|
Chart add график добавление данных
Merab,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<input id="btnNextStep" name="" type="button" value="add">
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var labelEdit;
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: [0], // подписи снизу
datasets: [
{
label: labelEdit || "Популяция существ", // название
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgb(255, 99, 132)",
data: [0] // значения
}
]
},
// Configuration options go here
options: {},
});
btnNextStep.onclick = () => {
console.log(1);
chart.data.datasets[0].data.push(40);
chart.data.labels.push(60);
chart.update();
};
</script>
</body>
</html>
|
|
Спасибо большое
|
| Часовой пояс GMT +3, время: 12:30. |