javascript - 图表JS不显示图表

Question

我正在使用 Chart JS，但图形数据不会显示。我很确定我遵循了正确的实现方法，但图形数据没有显示..

这是来自 API 的数据响应。

response: {
   "users": {
      "1": 3,
      "2": 0,
      "3": 0,
      "4": 0,
      "5": 0,
      "6": 0,
      "7": 0,
      "8": 0,
      "9": 0,
      "10": 0,
      "11": 0,
      "12": 0
   },
   "males": 3,
   "females": 0,
   "docs": {
      "1": 3,
      "2": 0,
      "3": 0,
      "4": 0,
      "5": 0,
      "6": 0,
      "7": 0,
      "8": 0,
      "9": 0,
      "10": 0,
      "11": 0,
      "12": 0
     },
   "regular": 3,
   "contractual": 0
}

这是我实现图表的方法

 var userData;
        var genderData;
        var docsData;
        var empStatusData;

        $.ajax({
            url : dataUrl,
            type : 'GET',
            success : function(response){

                userData = response.users;
                genderData = [response.males,response.females];
                docsData = response.docs;
                empStatusData = [response.regular,response.contractual];
            }
        })
        let chart = document.getElementById('users-chart').getContext('2d');
        let popChart = new Chart(chart,{
            type  : 'bar',
            data : {
                labels : ['Jan', 'Feb', 'Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                datasets : [{
                     label: 'User Registrations this year',
                     data: userData,
                     backgroundColor: 'rgba(0, 119, 204, 0.3)'
                }]
            }

        });

我只得到一个空白图表，其中没有数据。我在这里做错了什么？

感谢您的帮助。谢谢大家。

Answer 1

事情没那么容易。要更新图表，您必须访问图表变量，然后更新其字段。然后，您调用图表的 update() 函数。像这样:

$.ajax({
  url: dataUrl,
  type: 'GET',
  success: function (response) {
    popChart.data.datasets[0].data = response.users;
    popChart.update();
  }
});

您还可以创建执行此操作的函数以使代码更具可读性。就像 official documentation 中那样.

您的代码还有一个问题。在响应中，您将用户和文档作为对象，其中多个字段代表月份。 Chart.js 希望数据作为数组:

"users": [3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

而不是

"users": { "1": 3, "2": 0, "3": 0, "4": 0, "5": 0, "6": 0, "7": 0, "8": 0, "9": 0, "10": 0, "11": 0, "12": 0 }

如果您可以更改服务器端代码，您应该在那里进行操作。如果没有，您可以在客户端将用户/文档响应转换为数组。请参阅this问答。