Chart.js 在 xAxis 上显示时间(HH:MM:SS - 24 小时制)

新手上路,请多包涵

我有一个 .Net Core 应用程序,我在其中绘制了一个图表,显示一天中某些测量值的值。

我的“时间”对象是 Unix 时间,以毫秒为单位(例如 1502258405000)。我已经设法将其手动转换为时间对象,如下所示:

 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
});

然而,通过这种转换,我的 chart.js 图表无法将时间对象理解为时间,这意味着(如果测量中存在间隙)它不会显示(并且存在),因为它只会将测量值放在下一个彼此并将它们作为字符串处理。

我对显示日期不感兴趣,因为数据总是会在已知日期内收集。我将上面的实现更改为:

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

在此处输入图像描述

然而,当我在我的 chart.js 折线图上绘制它时,它使我的图表显示不需要的 AM/PM 值,如上所示。我想要一个 24 小时制的时钟。我使用 chart.js 时间值作为 xAxis 如下所示绘制上图中所示的值:

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

但是,这些值未按照我想要的输出进行格式化。所以我想知道使用 chart.js 将 一天中的时间 添加到图表上的 x 轴的正确方法是什么,甚至如何将其格式化为我想要的值?

原文由 Zeliax 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.6k
2 个回答

我发现这对于 Chart.js 是不可能的,所以我改用支持此功能的 Highcharts.js。

以下是我的解决方案代码:

 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
        }]
    });
}

最终结果如下所示:

在此处输入图像描述

原文由 Zeliax 发布,翻译遵循 CC BY-SA 3.0 许可协议

实际上这是支持的(至少在最新版本的 chartjs 中)。

似乎您必须为 chartjs 可以显示的所有不同格式指定格式。

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

在我的项目中,以下对我有用:

  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'
    }
 }],

原文由 Håkan Kvist 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题