Formatieren Sie die Y-Achse von Chart.JS als Zeit

Ich habe diese Tabelle unten, ich möchte die Y-Achse mit der TIME skalieren (die Zeit ist keine Tageszeit, sondern Stunden, Minuten, Sekunden, also könnte es mehr als 24 sein Stunden) scheint einfach nicht funktionieren zu können, alles, was ich bekomme, ist ein leerer Bildschirm, sicher, es ist ein Syntaxfehler, aber ich kann es nicht erkennen! DankeFormatieren Sie die Y-Achse von Chart.JS als Zeit

var ctx = document.getElementById("myChart3").getContext('2d'); 
var myChart3 = new Chart(ctx, { 
    type: 'line', 
    data: { 
     labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"], 
     datasets: [ 
      { 
       label: "Time", 
       backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#565452", "#321456", "#129864", "#326812", "#215984"], 
       data: ["11:46:07", "11:41:14", "11:55:26", "12:14:58", "11:54:55", "11:54:04", "12:28:29", "12:35:18"] 
      } 
    ] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       type: 'time', 
       time: { 
        displayFormats: { 
         minutes: 'h:mm:ss a' 
        } 
       } 
     }] 
     } 
    } 
});

Quelle

2017-05-09 Mike Todd

verwenden Sie 'moment.js'? –

nein, ich war nicht aber habe es jetzt hinzugefügt und funktioniert immer noch nicht. Ich kann die DATA als Sekunden bekommen, aber das Diagramm soll die Zeit als H: mm: ss anzeigen –

Zeitskala funktioniert nur für X-Achse. in Millisekunden seit 1970-01-01 (wie das übliche Date Objekt tut)

It can only be placed on the X axis.

Aber für Y können Sie eine linear Skala verwenden und jedes Mal als Datum auszudrücken.

PLUNKER oder verwenden Sie das folgende Beispiel:

$(function(){ 
 
    const ctx = document.getElementById('myChart').getContext('2d'); 
 
    
 
    let years = ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"]; 
 
    let times = ["11:46:07", "11:41:14", "11:55:26", "12:14:58", "11:54:55", "11:54:04", "12:28:29", "12:35:18"]; 
 
    
 
    let data = years.map((year, index) => ({ 
 
    x: moment(`${year}-01-01`), 
 
    y: moment(`1970-02-01 ${times[index]}`).valueOf() 
 
    })); 
 
    
 
    let bckColors = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#565452", "#321456", "#129864", "#326812", "#215984"]; 
 
    
 
    let myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     datasets: [ 
 
      { 
 
       label: "Time", 
 
       backgroundColor: 'rgba(188, 229, 214, 0.7)', 
 
       pointBackgroundColor: bckColors, 
 
       data: data, 
 
       pointBorderWidth: 2, 
 
       pointRadius: 5, 
 
       pointHoverRadius: 7 
 
      } 
 
     ] 
 
    }, 
 
    options: { 
 
     scales: { 
 
      xAxes: [ 
 
       { 
 
       type: 'time', 
 
       position: 'bottom', 
 
       time: { 
 
        displayFormats: { 
 
        years: 'YYYY' 
 
        }, 
 
        unit: 'year' 
 
       } 
 
       } 
 
      ], 
 
      yAxes: [ 
 
       { 
 
       type: 'linear', 
 
       position: 'left', 
 
       ticks: { 
 
        min: moment('1970-02-01 00:00:00').valueOf(), 
 
        max: moment('1970-02-01 23:59:59').valueOf(), 
 
        stepSize: 3.6e+6, 
 
        beginAtZero: false, 
 
        callback: value => { 
 
        let date = moment(value); 
 
        if(date.diff(moment('1970-02-01 23:59:59'), 'minutes') === 0) { 
 
         return null; 
 
        } 
 
        
 
        return date.format('h A'); 
 
        } 
 
       } 
 
       } 
 
      ] 
 
     } 
 
    } 
 
    }); 
 
});

<html> 
 
    <head> 
 
     <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
     <script src="https://npmcdn.com/[email protected]"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <canvas id="myChart" width="500" height="300"></canvas> 
 
    </body> 
 
</html>

Erklärung

Sie können die Jahre auf der X-Achse haben, die eine linear sein kann, time oder category Rahmen.

In diesem Beispiel ist die X-Achse eine time Skala.

let data = years.map((year, index) => ({ 
    x: moment(`${year}-01-01`), 
    y: moment(`1970-02-01 ${times[index]}`).valueOf() 
    }));

Für X Achse I moment js ein Datum zu erstellen, die auf dem ersten Tag des entsprechenden Jahres verwendet:

Das wird folgender Code zu generieren Werte für X und Y Achse verwendet.

Für Y Achse habe ich moment js verwendet, um das Datum in Millisekunden seit 1970-01-01 zu erstellen. In diesem Fall werden alle Stunden mit einem Tag zu einem Datum kombiniert. 1970-02-01, um eine Randfälle zu verhindern, die für 1970-01-01 auftreten können. Dann werden diese Millisekunden, da 1970-01-01, mit der Y Achse linear scale verwendet.

Y Achse tick.callback wird verwendet, um die entsprechenden Millisekunden zu einer Stunde zu formatieren. Verwenden Sie also das Format h A, um beispielsweise 1 AM, 1 PM, 12 AM, 12 PM, ... zu erhalten.

Quelle

2017-05-09 19:40:49 andreim

Formatieren Sie die Y-Achse von Chart.JS als Zeit

Antwort

Verwandte Themen