Chart.js zeigt die Uhrzeit (HH:MM:SS - 24-Stunden-Uhr) auf der x-Achse

Habe ich eine .Net-Core-Anwendung, in der ich bin-Zeichnung ein Diagramm mit Werten für einige Messungen, die während der Zeit des Tages.

Mein "Zeit" - Objekt ist in der Unix-Zeit mit Millisekunden (z.B. 1502258405000). Ich habe es geschafft, zu konvertieren, um ein Zeit-Objekt manuell wie folgt:

var datetimes = $.map(data, function (value, index) {
    var datetime = new Date(value.timestamp);
    var iso = datetime.toISOString().match(/(\d{4}\-\d{2}\-\d{2})T(\d{2}:\d{2}:\d{2})/);
    return iso[2]; //Returns HH:MM:SS
});

Jedoch mit dieser Umstellung meine chart.js chart nicht verstehen, die Zeit-Objekte wie Zeit, was bedeutet, dass (wenn es eine Lücke in den Messungen) es wird nicht zeigen (und es ist), da es einfach die Messungen nebeneinander und behandeln Sie als Zeichenfolgen.

Ich bin nicht daran interessiert, mit dem Datum, da die Daten immer gesammelt werden, die innerhalb einer bekannten Datum. Ich änderte meine obige Umsetzung:

var datetimes = $.map(gpsData, function (value, index) {
    return new Date(value.timestamp);
});

Chart.js zeigt die Uhrzeit (HH:MM:SS - 24-Stunden-Uhr) auf der x-Achse

Allerdings, wenn ich diese auf meinem Grundstück chart.js Liniendiagramm, das macht meine chart show AM/PM-Werte, die nicht gewünscht ist, wie hier zu sehen oben. Ich möchte eine 24-Stunden-Uhr. Ich benutzte die chart.js -Zeit-Wert für die xAxis so wie hier unten, um den Verlauf der Werte an, wie im Bild oben:

options: {
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                format: "HH:MM:SS",
                min: minTime, //calculated above in my implementation
                max: maxTime  //same as above
            }
        }]
    }
}

Aber die Werte sind nicht formatiert, wie der von mir gewünschten Ausgabe. So Frage ich mich, was die richtige Art von hinzufügen Zeit des Tages um die x-Achse bei Diagramm mit chart.js ist oder sogar, wie um Sie zu formatieren meine gewünschten Werte?

haben Sie versuchen, diese Lösung zu formatieren Datum? stackoverflow.com/questions/37061945/...
Yup. Und alle Kombinationen, die ich mir denken kann, kombiniert mit dieser Lösung. Das problem scheint zu sein, die Tatsache, dass Chart.js keine Unterstützung der 24-Stunden-Uhr, nach vielen Stunden der Forschung. Ich war nicht in der Lage etwas zu finden, in Ihre docs, die anderes sagt.
könnten Sie mir ein jsfiddle? vielleicht haben Sie das schreiben der x-Achse manuell
Ich werde Sie rechts auf, dies zu tun.
oder vielleicht können Sie versuchen dies, um benutzerdefinierte Ihrer x-Achse mit Zecken-Funktion, ich mache nur eine einfache änderung von anderen ppl-Demo, viel Glück. jsfiddle.net/prfd1m8q/999
Ja. Ich habe dies ausprobiert, aber als meine "Zeiten" sind in unix-Zeit, Wann Sie kommen, ich scheinen, um einige Probleme, sobald ich input, wie Sie überall. Habe ich geändert, das Beispiel, das Sie geteilt und hier ist es: jsfiddle.net/prfd1m8q/1000 Normalerweise meine unix-Zeiten in MS, daher habe ich entfernt, die letzten drei Nullen der Werte im Beispiel.
Auch mit moment.js und es ist unix-implementation tut nichts für mich. jsfiddle.net/prfd1m8q/1001
Ich habe es geschafft zu bekommen, die Sie z.B. bei der gemeinsamen Arbeit mit meinen Daten, aber es wird nicht in der type: 'time' Funktionalität chart.js und deshalb kann ich es nicht verwenden. Ich habe eine Lücke in meinen Daten, die nicht visualisiert werden, ohne die time Umsetzung. jsfiddle.net/prfd1m8q/1004

InformationsquelleAutor Zeliax | 2017-08-09

Tatsächlich unterstützt wird dies (zumindest in neueren Versionen von chartjs).

Wie es scheint, müssen Sie das format angeben, für all die verschiedenen Formate, die chartjs anzeigen kann.

Check:
https://www.chartjs.org/docs/latest/axes/cartesian/time.html#display-formats

In meinem Projekt die folgenden arbeiten für mich:

 xAxes: [{
    type: 'time',
    time: {
        parser: timeFormat,
        //round: 'day'                                                                                                                                                                            
        tooltipFormat: 'YYYY-MM-DD HH:mm',
        displayFormats: {
            millisecond: 'HH:mm:ss.SSS',
            second: 'HH:mm:ss',
            minute: 'HH:mm',
            hour: 'HH'
        }
    },
    display: true,
    scaleLabel: {
        display: true,
        labelString: 'Time'
    }
 }],

InformationsquelleAutor Håkan Kvist

Versuchen Sie dies:

scales: {
  xAxes: [{
    type: 'time',
    time: {
      unit: 'minute',
      unitStepSize: 30,
      displayFormats: {
         'minute': this.person.Use24h ? 'HH:mm' : 'hh:mm A'
      }
    }
  }]
}

Scheint nicht zu funktionieren, vielleicht könnte man hinzufügen, eine demo-snippet.

InformationsquelleAutor Stirrblig

-2

Fand ich, dass dies nicht möglich war, Chart.js also zog ich zu Highcharts.js statt, die diese Funktionalität unterstützt.

Hier unten ist mein code für die Lösung:

function tripSpeedsLineGraph() {
    var gpsData = @Html.Raw(Json.Serialize(Model.gpsData));

    chartData = []
    var reqData = $.map(gpsData, function (value, index) {
         chartData.push([new Date(value.timestamp), value.sp]);
    });

    var chart = Highcharts.chart('tripSpeedsLineChart', {
        chart: {
            type: 'spline',
            zoomType: 'x',
            panning: true,
            panKey: 'shift'
        },
        title: {
            text: "Speed during trip"
        },
        subtitle: {
            text: 'Click and drag to zoom in. Hold down shift key to pan.'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%b %H:%M:%S'
            },
            title: {
                text: 'Time of day'
            }
        },
        yAxis: {
            title: {
                text: 'Speed'
            },
            min: 0
        },
        tooltip: {
            crosshairs: [true],
            formatter: function () {
                return "Datetime: " + moment.utc(moment.unix(this.x/1000)).format("DD/MM-YYYY HH:mm:ss") + "<br> Speed: " + this.y;
            }
        },
        series: [{
            name: 'Speed Data',
            data: chartData
        }]
    });
}