Xaxes 中的 Chartjs 时间

Question

所以我一直试图在我的图表中的 Xaxes 中生成时间点。我找到了一些不同类型的示例，但没有一个有效。 Chartjs 的文档对我来说有点模糊。 那么如何在我的 xaxes 中插入生成的时间呢？

 $j(function(){
new Chart(document.getElementById("Combo"),
    {"type":"bar",
    "data":{
    "labels":["08:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00"],
    "datasets":[{"label":"Bar Dataset",
    "data":[11,58,23,44,19,87,65,11,58,23,44,19,87,65],
    "borderColor":"rgb(255, 99, 132)",
    "backgroundColor":"rgba(255, 99, 132, 0.2)"},

    {"label":"Line Dataset",
    "data":[11,58,23,44,19,87,65,11,58,23,44,19,87,65
    ],
    "type":"line",
    "fill":false,
    "borderColor":"rgb(54, 162, 235)"}]},

    "options":{
    "scales":{
    "xAxes":[{
    time:{
    unit:"hour"}
    }],
    xAxes: [{
  type: 'time',
  time: {
    format: "HH:mm",
    unit: 'hour',
    unitStepSize: 1,
    displayFormats: {
      'hour': 'HH', 

    },
}],
    "yAxes":[{
    "ticks":{"beginAtZero":true}
    }]
    }
    }
    });
});

Answer 1

您应该使用 parser 属性而不是 format （已弃用） 来解析日期。除此之外，您几乎没有其他语法问题需要修复。

这是您的代码的修订版：

$(function() {
   new Chart(document.getElementById("Combo"), {
      "type": "bar",
      "data": {
         "labels": ["08:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00"],
         "datasets": [{
            "label": "Bar Dataset",
            "data": [11, 58, 23, 44, 19, 87, 65, 11, 58, 23, 44, 19, 87, 65],
            "borderColor": "rgb(255, 99, 132)",
            "backgroundColor": "rgba(255, 99, 132, 0.2)"
         }, {
            "label": "Line Dataset",
            "data": [11, 58, 23, 44, 19, 87, 65, 11, 58, 23, 44, 19, 87, 65],
            "type": "line",
            "fill": false,
            "borderColor": "rgb(54, 162, 235)"
         }]
      },
      "options": {
         "scales": {
            "xAxes": [{
               type: 'time',
               time: {
                  parser: "HH:mm", //<- use 'parser'
                  unit: 'hour',
                  unitStepSize: 1,
                  displayFormats: {
                     'hour': 'HH',
                  }
               }
            }],
            "yAxes": [{
               "ticks": {
                  "beginAtZero": true
               }
            }]
         }
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<canvas id="Combo"></canvas>