如何在 X 上绘制日期/时间，但在 Chart.js 中仅显示日期？

Question

我有一系列数据点，每个数据点对应一个特定的日期/时间。每个点之间的时间各不相同，范围涵盖数天（最多 30 天）。每天可能有多个点，也可能有几天没有数据点。

我希望 X 刻度显示日期（包括星期几），并根据日期和时间将数据点绘制到它们应该去的地方。例如，2018-02-15 12:00:00 将介于 02-15 和 02-16 的标签之间。

这里是一些示例代码/数据：

var chartData = {
    type:'line',
    data: {
        datasets: [
            {
                label:'Depression',
                backgroundColor:'#00f',
                borderColor:'#00f',
                data:[
                    {y:3,t:Date.parse('2018/02/20 05:01:16')},
                    {y:4,t:Date.parse('2018/02/20 15:03:09')},
                    {y:5,t:Date.parse('2018/02/21 05:04:09')},
                    {y:1,t:Date.parse('2018/02/21 08:06:09')},
                    {y:5,t:Date.parse('2018/02/22 05:05:09')},
                ],
                fill:false,
            },
            {
                label:'Anxiety',
                backgroundColor:'#d0d',
                borderColor:'#d0d',
                data:[
                    {y:6,t:Date.parse('2018/02/20 05:01:16')},
                    {y:2,t:Date.parse('2018/02/20 15:03:09')},
                    {y:4,t:Date.parse('2018/02/21 05:04:09')},
                    {y:6,t:Date.parse('2018/02/21 08:06:09')},
                    {y:3,t:Date.parse('2018/02/22 05:05:09')},
                ],
                fill:false,
            },
            {
                label:'Activity',
                backgroundColor:'#f90',
                borderColor:'#f90',
                data:[
                    {y:4,t:Date.parse('2018/02/20 05:01:16')},
                    {y:1,t:Date.parse('2018/02/20 15:03:09')},
                    {y:4,t:Date.parse('2018/02/21 05:04:09')},
                    {y:7,t:Date.parse('2018/02/21 08:06:09')},
                    {y:3,t:Date.parse('2018/02/22 05:05:09')},
                ],
                fill:true,
            },
            {
                label:'Physical Health',
                backgroundColor:'#ffc',
                borderColor:'#cc0',
                data:[
                    {y:-2,t:Date.parse('2018/02/20 05:01:16')},
                    {y:-3,t:Date.parse('2018/02/20 15:03:09')},
                    {y:-2,t:Date.parse('2018/02/21 05:04:09')},
                    {y:-6,t:Date.parse('2018/02/21 08:06:09')},
                    {y:-5,t:Date.parse('2018/02/22 05:05:09')},
                ],
                fill:true,
            },
        ],
        fill:false,
    },
    'options': {
        responsive:true,
        title:{
            display:true,
            text:'Recent History',
        },
        scales: {
            xAxes:[{
                display:true,
                time: {
                    min:Date.parse('2018/02/01 00:00:00'),
                    max:Date.parse('2018/03/01 00:00:00'),
                    displayFormats:{
                        day:'ddd MM/DD',
                    },
                    unit:'day',
                    round:'day',
                },
                distribution:'linear',
                scaleLabel: {
                    display:true,
                    labelString:'Date'
                },
                bounds:'data',
                ticks: {
                    source:'data',
                },
            }],
            yAxes:[{
                display:true,
                scaleLabel:'Rating'
            }]
        },
    }
};

上面的代码只显示每个系列的前两个数据点。

谢谢！

Answer 1

http://www.chartjs.org/docs/latest/axes/cartesian/time.html#ticks-source http://www.chartjs.org/docs/latest/axes/labelling.html#scale-title-configuration

你可以尝试改变

ticks: {
   source:'data',
},

...到source:'auto'，它会为您自动截断刻度标签，然后看看它是什么样子...

X 轴is described here 的时间刻度显示格式，因此您可以将其格式化为您想要的任何 Moment.js 时间格式，例如'YYYY-mm-dd:

 xAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        quarter: 'MMM YYYY'
                    }
                }
            }]

...虽然看起来你可能已经在里面了。它没有显示任何 x 轴刻度吗？它是否显示任何错误？

或者，如果您想包含日期/时间以外的内容，您可以尝试关注this example 来覆盖自定义“tick”的回调方法。他们的示例是在所有值之前附加一个美元符号。如果您只想处理日期时间，那么上述解决方案应该就足够了。