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 Q＆amp; A。

图表JS不显示图表

1 个答案: