【发布时间】：2020-07-10 11:02:09
【问题描述】：
我有一个 Vue.JS 项目从 REST API 获取数据（我的，所以如果需要我可以修改它）。此数据针对 Chart.JS 进行了格式化。 我应该显示一个包含 3 个数据集的图表，2 个具有相同 X 值的 line 类型，但 1 个具有不同 X 值的 bar 类型（这就是我不想指定标签的原因）。不管怎样，所有的 X 值都是日期，所以我希望所有曲线只有 1 个 X 轴。
我正在使用 (x,y) 数据格式的数据集：
- x 是 ISO8601 日期
- y 是浮点数
我的问题是根本没有显示任何内容...谁能帮助我，我不明白为什么。我觉得自己做对了。我在某处看到我需要包含 momentjs，但在官方文档中他们说事实并非如此。我敢打赌，问题来自日期，因为我尝试更改 y 值，并且修改了 2 y 轴边界（因此可以理解 y 值）。我也尝试添加“xAxisID”选项，没有任何改变。
这是我的数据样本（通常有数百个值）：
{
"type": "line",
"data": {
"datasets": [
{
"label": "Température",
"borderColor": "red",
"backgroundColor": "red",
"fill": false,
"data": [
{
"x": "2020-07-05T15:38:47.933711",
"y": 2.8224692
},
{
"x": "2020-07-05T15:48:47.490669",
"y": 33.63129
},
{
"x": "2020-07-05T15:58:48.182698",
"y": 40.540405
},
{
"x": "2020-07-05T16:08:47.829882",
"y": 3.0312533
},
{
"x": "2020-07-05T16:18:47.489026",
"y": 49.145626
}
],
"yAxisID": "yAxeTemperature"
},
{
"label": "Humidité",
"borderColor": "blue",
"backgroundColor": "blue",
"fill": false,
"data": [
{
"x": "2020-07-05T15:38:47.933711",
"y": 33.980587
},
{
"x": "2020-07-05T15:48:47.490669",
"y": 2.0313625
},
{
"x": "2020-07-05T15:58:48.182698",
"y": 24.249685
},
{
"x": "2020-07-05T16:08:47.829882",
"y": 7.4426904
},
{
"x": "2020-07-05T16:18:47.489026",
"y": 2.6335742
},
{
"x": "2020-07-05T16:28:48.175547",
"y": 25.92827
}
],
"yAxisID": "yAxeHumidite"
}
]
},
"options": {
"responsive": true,
"hoverMode": "index",
"stacked": false,
"title": null,
"scales": {
"xAxes": [
{
"type": "time",
"display": true,
"position": "bottom",
"id": "xAxeTime",
"scaleLabel": {
"display": true,
"labelString": "Temps",
"fontColor": "black"
},
"time": {
"unit": "minute",
"parser": "moment.ISO_8601",
"tooltipFormat": "ll"
}
}
],
"yAxes": [
{
"type": "linear",
"display": true,
"position": "left",
"id": "yAxeTemperature",
"scaleLabel": {
"display": true,
"labelString": "Température",
"fontColor": "red"
}
},
{
"type": "linear",
"display": true,
"position": "left",
"id": "yAxeHumidite",
"scaleLabel": {
"display": true,
"labelString": "Humidité",
"fontColor": "blue"
}
}
]
}
}
}
这是我的图表的创建方式（使用 vue-chartjs 和 chart.js）：
createChart(chartId : string, chartData : GrapheBean) {
const ctx = document.getElementById(chartId);
// @ts-ignore
const myChart = new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options,
});
}
结果如下：
我现在被困住了，即使仍在尝试一些希望渺茫的事情。非常感谢那些可以帮助我的人。
【问题讨论】：
标签： chart.js momentjs vue-chartjs