Форум

Merab · #1 (**permalink**) 22.04.2020, 00:06

Хочу вносить значения в ходе программы, но не могу понять как это сделать, т.е. я в принципе изменяю значения, но не могу обновить график чтобы он отобразился уже с новыми параметрами.

рони · #2 (**permalink**) 22.04.2020, 00:17

Merab,
http://jsfiddle.net/xhequLjw/
https://javascript.ru/forum/library-...-i-update.html

Merab · #3 (**permalink**) 22.04.2020, 02:47

При попытке добавить данные через метод .addData появляется ошибка - Uncaught TypeError: chart.addData is not a function, что я делаю не так?

рони · #4 (**permalink**) 22.04.2020, 07:26

Merab,
сделайте макет.

рони · #5 (**permalink**) 22.04.2020, 07:26

Merab,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Merab · #6 (**permalink**) 22.04.2020, 09:04

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();
};

рони · #7 (**permalink**) 22.04.2020, 09:49

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>

рони · #8 (**permalink**) 22.04.2020, 09:55

Merab,
либо самому написать функцию addData
https://www.chartjs.org/docs/latest/...html?h=adddata

Merab · #9 (**permalink**) 22.04.2020, 12:53

Спасибо большое

Форум

Справочник

Discord чат

Курсы javascript