Javascript Chart.js-如何创建统计标签并填充动态数据？

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

[{“时间戳”：“06:00:00.000000”，“真计数”：2}，{“时间戳”：“07:00.000000”，“真计数”：5}，{“时间戳”：“08:00:00.000000”，“真计数”：7}，{“时间戳”：“09:00:00.000000”，“真计数”：8}，{“时间戳”：“10:00:00.000000”，“真计数”：12}，{“时间戳”：“11:00:00.000000”，“真计数”：15}，{“时间戳”，“12:00:00”，“真计数”：“13:00:00.000000”，“真计数”：17}，{“时间戳”：“14:00:00.000000”，“真计数”：14}，{“时间戳”：“16:00.000000”，“真计数”：11}，{“时间戳”：“17:00:00.000000”，“真计数”：19}，{“时间戳”：“18:00:00.000000”，“真计数”：22}，{“时间戳”：“19:00:00.000000”，“真计数”：16}，{“时间戳”：“20:00:00”，“真计数”：“时间戳”：22:00:00.000000，“真实计数”：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);

现在，这工作正常，显示了一个小时内的真实_计数。现在，图表只显示了带有计数的小时数，但我想做的是将静态小时数从上午12点设置为晚上11点，对于我没有数据的小时数，真实_计数将为零，对于我有数据的小时数，真实计数将为assi到了那个小时，并显示在图表上

关于如何做到这一点有什么想法吗？

下面是一个例子：

//创建初始空图表
var ctx_live=document.getElementById（“chLine”）；
var myChart=新图表（ctx_live{
类型：'bar'，
数据：{
标签：[]，
数据集：[{
数据：[]，
边框宽度：1，
边框颜色：“#00c0ef”，
标签：“liveCount”，
}]
},
选项：{
回答：是的，
标题：{
显示：对，
文字：“每小时计数”，
},
图例：{
显示：假
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
}
}]
}
}
});
//一些常数将在以后更改：
从开始到结束的持续时间=0；
施工时距施工结束时间=23；
//助手：
常数intToAmPm=（i）=>
i==0？'12 AM'：
i==12？“下午12点”：
i<12？i+是：
（i-12）+“PM”；
//获取新数据的逻辑
var getData=function（）{
var_数据=[]；
var_标签=[]；
$ajax({
url:“图表数据”，
键入：“获取”，
成功：功能（数据）{
full_data=JSON.parse（数据）；
让preparedData={}；
full_data.forEach（函数（键、索引）{
让hour=parseInt（字符串（key.timestamp）.substring（0,2））；
preparedData[小时]=key.true\u计数；
});
对于（让i=HOUR\u TO\u START；我是否可以从这段代码创建一个JSFIDLE（或类似的），这样我们就可以检查它是如何工作的？我不知道该怎么做。：-（我想我开始理解你需要做什么了。你能把你得到的真正的JSON添加到问题中，而不是这个“空”吗"一个？@Anton-Hi，我添加了json文件。正如你所看到的，这一天我在上午12点到早上6点之间没有真的计数，下午3点、晚上9点和晚上11点没有真的计数。但是我需要创建statics Axist来显示上午12点到晚上11点，我没有数据的时间应该是零。你总是有格式
22:00:00.000000
例如，有时它可能是'22:01:02.300000'（我的意思是分钟和秒总是零？）这正是我想要的。它正是我所需要的。如果你来亚特兰大，你可以和我一起吃午饭。：-）还有一个问题，是否可以将其设置为上午和下午而不是0-23点？@Slavisha84只有一个问题，因为我使用24小时：是12:00（一天中）-是上午12点还是下午12点，或者只是简单的12点？因此在这个示例中，00:00:00将是上午12点，12:00:00将是下午12点12PM@Slavisha84正如你所说，好的。我已经更新了我的答案。