Javascript 使用chart js v3的带有一些X轴标签的时间图表标签

我正试着用计算机绘制湿度和温度图。我的问题是，温度和湿度的测量时间在它们之间是不同的

例如：我可以在上午11:01测量温度值，在11:05测量湿度

而且我的温度点比湿度点多

所以我希望x轴就是时间，在每个数据集的点上固定时间，就像这样，我可以在每个数据集中有不同数量的点，并在同一个图表中打印这两个数据集

我正在尝试为x轴使用时间类型，但它无法正常工作，因为我必须使用label属性修复点数

            data:{
                labels,
                datasets: [{
                    //label: 'My First dataset',
                    //backgroundColor: 'rgb(255, 99, 132)',
                    //borderColor: 'rgb(255, 99, 132)',
                    //data: sensorValues,
                    data
                }]
            },

编辑1：

我更改了数据结构，现在结构是：

var chart = new Chart(document.getElementById('sensorValuesChart'), {
            type: 'line',
            data:{
                datasets: [{
                    label: 'My First dataset',
                    //backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: sensorValues,
                    //data
                }]
            },
            options: {
                parsing: {
                    xAxisKey: 'time',
                    yAxisKey: 'value'
                },
            }
        });

---

传感器值为：

[{value:“65”，time:“2021-05-19 09:13:41”}，{value:“70”，time:“2021-05-19 09:09:39”}，…]

但未显示任何内容。

根据，标签属性是可选的。简单的答案就是不要使用它。您可以始终使用

{x，y}

或

{t，y}

格式，这将动态构建标签。或者，您只需要确保标签的数量与较大数据集的大小相匹配（以较大数据集的大小为准）。

根据，标签属性是可选的。简单的答案就是不要使用它。您可以始终使用

{x，y}

或

{t，y}

格式，这将动态构建标签。或者，您只需要确保标签的数量与较大数据集的大小相匹配，以两者为准。

正如Samuei所指出的，如果您有多个不同长度的数据集，最好的指定方法是使用对象符号，就像您在编辑中所做的那样，如果键不同，还可以在数据集级别而不是在选项中指定解析键

您的图表仍然没有显示的原因是，由于chart.js v3您将需要为时间轴使用日期适配器，chart.js当前有3个可用的日期适配器（）我在本例中使用了即时适配器：

var chart=新图表（document.getElementById（'sensorValuesChart'）{
键入：“行”，
数据：{
数据集：[{
标签：“我的第一个数据集”，
//背景颜色：“rgb（255，99，132）”，
边框颜色：“rgb（255，99，132）”，
数据：[{
值：“65”，
时间：“2021-05-19 09:13:41”
}, {
值：“70”，
时间：“2021-05-19 09:09:39”
}],
}]
},
选项：{
解析：{
xAxisKey:“时间”，
yAxisKey:“值”
},
比例：{
x:{
键入：“时间”，
显示：对，
时间：{
单位：分钟，
显示格式：{
小时：“日/月|时：月”
},
},
},
y:{
类型：“线性”
}
}
}
});
正如Samuei所指出的，如果您有多个不同长度的数据集，最好的指定方法是使用对象表示法，就像您在编辑中所做的那样，如果键不同，您也可以在数据集级别而不是在选项中指定解析键

您的图表仍然没有显示的原因是，由于chart.js v3您将需要为时间轴使用日期适配器，chart.js当前有3个可用的日期适配器（）我在本例中使用了即时适配器：


var chart=新图表（document.getElementById（'sensorValuesChart'）{
键入：“行”，
数据：{
数据集：[{
标签：“我的第一个数据集”，
//背景颜色：“rgb（255，99，132）”，
边框颜色：“rgb（255，99，132）”，
数据：[{
值：“65”，
时间：“2021-05-19 09:13:41”
}, {
值：“70”，
时间：“2021-05-19 09:09:39”
}],
}]
},
选项：{
解析：{
xAxisKey:“时间”，
yAxisKey:“值”
},
比例：{
x:{
键入：“时间”，
显示：对，
时间：{
单位：分钟，
显示格式：{
小时：“日/月|时：月”
},
},
},
y:{
类型：“线性”
}
}
}
});

我试过了，但是当我表示像
[{t:，y:}，{t:，y:}，]
这样的数据时，它不起作用，在x轴上没有任何标签，点也不在图表中。我想刻度没有显示，因为您在刻度上指定了
display:false
。我编辑了问题：）我尝试过，但当我表示数据时，如
[{t:，y:}，{t:，y:}，]
它不起作用，在x轴上没有任何标签，点也不在图表中。我猜想刻度没有显示，因为您在刻度上指定了
display:false
。我编辑了问题：）嘿！非常感谢，这是可行的，但是chart.js版本是2.29，而不是我正在使用的3.X版本。我想我的问题可能在于我在互联网上看到的例子都是旧的，我只是想用官方文件来做。谢谢。您使用的是v3语法，所以这可能是它不起作用的原因。请查看具体的v2文档，了解如何使用chart.js：嘿！非常感谢，这是可行的，但是chart.js版本是2.29，而不是我正在使用的3.X版本。我想我的问题可能在于我在互联网上看到的例子都是旧的，我只是想用官方文件来做。谢谢。您使用的是v3语法，因此这可能是它不起作用的原因。请查看有关如何使用chart.js的特定v2文档：
var chart = new Chart(document.getElementById('sensorValuesChart'), {
            type: 'line',
            data:{
                datasets: [{
                    label: 'My First dataset',
                    //backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: sensorValues,
                    //data
                }]
            },
            options: {
                parsing: {
                    xAxisKey: 'time',
                    yAxisKey: 'value'
                },
            }
        });