Chart.js - 如何拥有统计标签并填充动态数据？

Question

我正在研究 chart.js，我有通过 ajax 来自 JSON 的数据。请参见下面的示例：

[{"timestamp":"06:00:00.000000","true_count":2},{"timestamp":"07:00:00.000000","true_count":5},{"timestamp":"08:00 :00.000000","true_count":7},{"时间戳":"09:00:00.000000","true_count":8},{"时间戳":"10:00:00.000000","true_count":12} ,{"timestamp":"11:00:00.000000","true_count":15},{"timestamp":"12:00:00.000000","true_count":20},{"timestamp":"13:00 :00.000000","true_count":17},{"时间戳":"14:00:00.000000","true_count":14},{"时间戳":"16:00:00.000000","true_count":11} ,{"时间戳":"17:00:00.000000","true_count":19},{"timestamp":"18:00:00.000000","true_count":22},{"timestamp":"19:00:00.000000","true_count":16},{"timestamp":"20:00: 00.000000","true_count":14},{"时间戳":"22:00:00.000000","true_count":7}]

我用于图表的 JS 代码如下：

    // create initial empty chart

var ctx_live = document.getElementById("chLine");

var myChart = new Chart(ctx_live, {

  type: 'bar',

  data: {

    labels: [],

    datasets: [{

      data: [],

      borderWidth: 1,

      borderColor:'#00c0ef',

      label: 'liveCount',

    }]

  },

  options: {

    responsive: true,

    title: {

      display: true,

      text: "Count Per Hour",

    },

    legend: {

      display: false

    },

    scales: {

      yAxes: [{

        ticks: {

          beginAtZero: true,

        }

      }]

    }

  }

});

// logic to get new data

var getData = function() {

   var _data =[];

   var _labels = [];

  $.ajax({

    url: 'chart_data',

         type: "get",

    success: function(data) {

    full_data = JSON.parse(data);

    full_data.forEach(function(key,index) {

    _data.push(key.true_count);

    _labels.push(key.hour);

 });

    

    myChart.data.labels = _labels;

    myChart.data.datasets[0].data = _data;

      myChart.update();

    }

  });

};

// get new data every 3 seconds

setInterval(getData, 3000);

现在，这工作正常并显示了 true_count 随着时间的推移，这是一个小时的基础。现在，该图表仅显示带计数的小时数，但我想做的是将静态小时数设置为从上午 12 点到晚上 11 点，对于我没有数据的小时数，true_count 将为零，对于那些我有数据，真实计数将分配给那个小时并显示在图表上。

关于我该怎么做的任何想法？

Answer 1

这是一个例子：// create initial empty chartvar ctx_live = document.getElementById("chLine");var myChart = new Chart(ctx_live, {&nbsp; type: 'bar',&nbsp; data: {&nbsp; &nbsp; labels: [],&nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; data: [],&nbsp; &nbsp; &nbsp; borderWidth: 1,&nbsp; &nbsp; &nbsp; borderColor: '#00c0ef',&nbsp; &nbsp; &nbsp; label: 'liveCount',&nbsp; &nbsp; }]&nbsp; },&nbsp; options: {&nbsp; &nbsp; responsive: true,&nbsp; &nbsp; title: {&nbsp; &nbsp; &nbsp; display: true,&nbsp; &nbsp; &nbsp; text: "Count Per Hour",&nbsp; &nbsp; },&nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; display: false&nbsp; &nbsp; },&nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; beginAtZero: true,&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; }&nbsp; }});// Some constants to be changed later:const HOUR_TO_START = 0;const HOUR_TO_END = 23;// helper:const intToAmPm = (i) =>&nbsp;&nbsp; i==0 ? '12 AM' :&nbsp; i==12 ? '12 PM' :&nbsp; i < 12 ? i + ' AM' :&nbsp; (i-12) + ' PM';// logic to get new datavar getData = function() {&nbsp; var _data = [];&nbsp; var _labels = [];&nbsp; $ajax({&nbsp; &nbsp; url: 'chart_data',&nbsp; &nbsp; type: "get",&nbsp; &nbsp; success: function(data) {&nbsp; &nbsp; &nbsp; full_data = JSON.parse(data);&nbsp; &nbsp; &nbsp; let preparedData = {};&nbsp; &nbsp; &nbsp; full_data.forEach(function(key, index) {&nbsp; &nbsp; &nbsp; &nbsp; let hour = parseInt(String(key.timestamp).substring(0, 2));&nbsp; &nbsp; &nbsp; &nbsp; preparedData[hour] = key.true_count;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; for (let i = HOUR_TO_START; i <= HOUR_TO_END; i++) {&nbsp; &nbsp; &nbsp; &nbsp; _data.push(preparedData[i] === undefined ? 0 : preparedData[i]);&nbsp; &nbsp; &nbsp; &nbsp; _labels.push(intToAmPm(i));&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; myChart.data.labels = _labels;&nbsp; &nbsp; &nbsp; myChart.data.datasets[0].data = _data;&nbsp; &nbsp; &nbsp; myChart.update();&nbsp; &nbsp; }&nbsp; });};// get new data every 3 seconds//setInterval(getData, 3000);getData();// THIS IS FOR TESTING. IMITATE BACKENDfunction $ajax(param) {&nbsp; param.success('[{"timestamp":"06:00:00.000000","true_count":2},{"timestamp":"07:00:00.000000","true_count":5},{"timestamp":"08:00:00.000000","true_count":7},{"timestamp":"09:00:00.000000","true_count":8},{"timestamp":"10:00:00.000000","true_count":12},{"timestamp":"11:00:00.000000","true_count":15},{"timestamp":"12:00:00.000000","true_count":20},{"timestamp":"13:00:00.000000","true_count":17},{"timestamp":"14:00:00.000000","true_count":14},{"timestamp":"16:00:00.000000","true_count":11},{"timestamp":"17:00:00.000000","true_count":19},{"timestamp":"18:00:00.000000","true_count":22},{"timestamp":"19:00:00.000000","true_count":16},{"timestamp":"20:00:00.000000","true_count":14},{"timestamp":"22:00:00.000000","true_count":7}]');}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><canvas id="chLine"></canvas>