XaxesのChartsjs時間

Question

私はチャートのXaxesでタイムポイントを生成しようとしています。私はいくつかの例を見つけましたが、種類は異なりますが、どれも働いていません。 Chartsjsのための文書は私のために少しばかだ。 私は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

あなたは日付を解析する代わりに、（非推奨）formatのparserプロパティを使用する必要があります。それとは別に、修正する必要のある構文の問題はほとんどありません。ここで

はあなたのコードの改訂版である：

$(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>