Как в chartJS динамично изменять данные у диаграммы?

Question

Я бы хотел изменять данные в текущей диаграмме от введения цифр в input, как мне это сделать?

const canvas = document.querySelector('canvas');

const number = document.querySelector('.number');
number.addEventListener('input', (e) => {
  console.log(e.target.value)
});

const chart = new Chart(canvas, {
  "type": "doughnut",
  "data": {
    "labels": ["Red", "Blue", "Yellow"],
    "datasets": [{
      "label": "My First Dataset",
      "data": [300, 50, 100],
      "backgroundColor": ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"]
    }]
  }
});

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 20px;
}

body,
html {
  width: 100%;
  height: 100%;
}

input {
  margin-top: 20px;
  max-width: 350px;
  width: 100%
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

<input type="number" class="number">
<canvas></canvas>

Answer 1

const canvas = document.querySelector('canvas');

const number = document.querySelector('.number');
number.addEventListener('input', (e) => {
  chart.data.datasets[0].data[0] = e.target.value;
  chart.update();
});

const chart = new Chart(canvas, {
  "type": "doughnut",
  "data": {
    "labels": ["Red", "Blue", "Yellow"],
    "datasets": [{
      "label": "My First Dataset",
      "data": [300, 50, 100],
      "backgroundColor": ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"]
    }]
  }
});

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 20px;
}

body,
html {
  width: 100%;
  height: 100%;
}

input {
  margin-top: 20px;
  max-width: 350px;
  width: 100%
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

<input type="number" class="number">
<canvas></canvas>

БЛОГ НА HUSL

Как в chartJS динамично изменять данные у диаграммы?

Ответы (1 шт):