Chartsjs Zeit in Xaxes

Question

So habe ich versucht, Zeitpunkte in den Xaxes in meinem Diagramm zu generieren. Ich habe einige Beispiele von verschiedenen Arten gefunden, aber keine von ihnen hat funktioniert. Das Dokument für Chartsjs ist ein bisschen verschwommen für mich. Wie kann ich generierte Zeit in meine Xaxes einfügen?

$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

Sie sollten die statt parser Eigenschaft format(veraltet) das Datum zu analysieren. Abgesehen davon haben Sie einige andere Syntaxprobleme, die behoben werden müssen.

Hier ist die überarbeitete Version des Codes:

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