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