Question

我想显示来自JSON的一些数据：

[{"heure":"08:00:00","date":"2017-08-09","payload":"1"}]

我使用Chart JS构建图表：

for(var i in data) {
                heure.push("Heure " + data[i].heure);
                date.push(data[i].date);
                payload.push(data[i].payload);
            }

            var chartdata = {
                labels: date,
                datasets: [
                    {
                        label: nomGraph,
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: "rgba(59, 89, 152, 0.75)",
                        borderColor: "rgba(59, 89, 152, 1)",
                        pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                        pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                        data: payload
                    }
                ]
            };
            var option = {
                scales: {
                    yAxes:[{
                        stacked:true
                    }],

                    xAxes: [{
                        type: 'time',
                        position: 'bottom',
                        time: {
                            tooltipFormat: "MM-DD-YYYY",
                        },
                    }],
                }
            };

            var ctx = $("#mycanvas");

            var LineGraph = new Chart(ctx, {
                type: 'line',
                data: chartdata
            });

问题是我无法在X轴上显示良好的比例。我有2017-08-09或者我想08-09-2017感谢这一行：

tooltipFormat: "MM-DD-YYYY",

最好的方法是用时间变量显示8月9日10H。

tooltipFormat: "MMM-DDD-HHHH",

但它不起作用。你知道为什么吗？

Answer 1

图表js使用moment.js时间格式器来格式化工具提示字符串。所以我认为时刻格式标记应该有用。阅读更多相关信息。
https://momentjs.com/docs/#/displaying/format/

如果日期为2017-01-29 10:00:00 AM，

MMM-DD-HH将相当于Jan-29-10

但我在日期字符串中看不到任何HOUR部分。如果您希望格式化小时数，则应使用以下标准方式输入日期字符串和时间数据。

2013-02-04T22:44:30.652Z

有几种ISO标准可供选择。你可以选择一个。阅读更多相关信息。 https://momentjs.com/docs/#/displaying/as-iso-string/

图表JS日期时间AxesX

1 个答案: