Chartjs - Как обновить данные из значений в моей базе данных?

Question

У меня возникли проблемы с обновлением моей кольцевой диаграммы Chartjs с использованием данных, извлеченных из моей базы данных.

У меня есть следующий вызов ajax, который успешен:

  $.ajax({
    url: "<!--#include virtual="../include/env"-->/data",
    type: "GET",
    cache: "false",
    success: function(value) {
      update_doughnut(value);
    },
    dataType: "json"
  });

Это получает 2 значения [используется и свободно] JS для моего графика выглядит следующим образом:

var ctx = document.getElementById('myDoughnutChart').getContext('2d');
var myDoughnutChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['Used', 'Free'],
    datasets: [{
      data: [0, 0],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(75, 192, 192, 0.2)'
    ],
    borderColor: [
      'rgba(255, 99, 132, 1)',
      'rgba(75, 192, 192, 1)'
  ],
  borderWidth: 2
  }]
},
options: {
  responsive: true,
  legend: {
    display: false
  }
},
});

Я попытался создать эту функцию, которую ajax вызывает для обновления данных:

function table_space(value) {
    myDoughnutChart.data.datasets[0].data = [value[0].USED, value[0].FREE]

    myDoughnutChart.update();
  };

Но я продолжаю получать сообщение об ошибке «Не удается прочитать свойство« 0 »неопределенного».Стоит отметить, что запрос, выполняемый вызовом ajax, может занять 40 секунд;это могло быть почему?

Answer 1

Спасибо за ответ.Но удалось выяснить это.Мне нужно внести изменения в мой вызов Ajax, чтобы напрямую обновить значения моих пончиков и избавиться от функции table_space:

 $.ajax({
        url: "<!--#include virtual="../include/env"-->/data",
        type: "GET",
        cache: "false",
        success: function(value) {
        Doughnut1.data.datasets[0].data = [value[0].USED, value[0].FREE]
        Doughnut2.data.datasets[0].data = [value[1].USED, value[1].FREE]
        Doughnut3.data.datasets[0].data = [value[2].USED, value[2].FREE]
        Doughnut1.update();
        Doughnut2.update();
        Doughnut3.update();
      },
        dataType: "json"
      });