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覆盖自定义＆＃39; tick＆＃39;的回调方法。如果你想包括除日期/时间之外的东西。他们的例子是在所有价值观之前附加一个美元符号。如果您只想处理日期时间，那么上述解决方案应该足够了。

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

1 个答案: