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 chartvar 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 datavar 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 secondssetInterval(getData, 3000);现在，这工作正常并显示了 true_count 随着时间的推移，这是一个小时的基础。现在，该图表仅显示带计数的小时数，但我想做的是将静态小时数设置为从上午 12 点到晚上 11 点，对于我没有数据的小时数，true_count 将为零，对于那些我有数据，真实计数将分配给那个小时并显示在图表上。关于我该怎么做的任何想法？

Answer 1

这是一个例子：

// 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,

        }

      }]

    }

  }

});

// Some constants to be changed later:

const HOUR_TO_START = 0;

const HOUR_TO_END = 23;

// helper:

const intToAmPm = (i) => 

  i==0 ? '12 AM' :

  i==12 ? '12 PM' :

  i < 12 ? i + ' AM' :

  (i-12) + ' PM';

// 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);

      let preparedData = {};

      full_data.forEach(function(key, index) {

        let hour = parseInt(String(key.timestamp).substring(0, 2));

        preparedData[hour] = key.true_count;

      });

      for (let i = HOUR_TO_START; i <= HOUR_TO_END; i++) {

        _data.push(preparedData[i] === undefined ? 0 : preparedData[i]);

        _labels.push(intToAmPm(i));

      }

      myChart.data.labels = _labels;

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

      myChart.update();

    }

  });

};

// get new data every 3 seconds

//setInterval(getData, 3000);

getData();

// THIS IS FOR TESTING. IMITATE BACKEND

function $ajax(param) {

  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>