javascript - ChartJs 3.2.1 时间刻度以错误的 Startdate 开头
问题描述
随着从 ChartsJs V2.8.4 到 3.2.1 的更改,我遇到了 X 轴(类型时间)的问题,即启动不正确,不幸的是我不知道问题可能出在哪里。下面我附上了 2 张应该指出问题的图片以及图表的配置。
如果我删除 x.time.unit 选项,它也会正确启动。
我会很高兴你的想法。谢谢您的帮助。
我的图表配置
{
"type": "bar",
"data": {
"datasets": [
{
"Variable": 31824,
"label": "PV-IN",
"type": "line",
"order": 0,
"backgroundColor": "rgba(0, 255, 30, 0.20)",
"fill": true,
"borderColor": "rgba(0, 255, 30, 1.00)",
"borderWidth": 1,
"highRes": 5,
"offset": 0,
"counter": false,
"data": [
{
"x": 1620511200000,
"y": 432.26
},
{
"x": 1620597600000,
"y": 204.38
},
{
"x": 1620684000000,
"y": 131.85
},
{
"x": 1620770400000,
"y": 220.51
},
{
"x": 1620856800000,
"y": 33.1
},
{
"x": 1620943200000,
"y": 119
},
{
"x": 1621029600000,
"y": 189.41,
"c": 840
}
],
"stack": "Stack -1",
"yAxisID": "Steca_Leistung",
"pointRadius": 0,
"pointHoverRadius": 5,
"pointStyle": "circle",
"digits": 0
},
{
"Variable": 19340,
"label": "Out",
"type": "line",
"order": 0,
"backgroundColor": "rgba(255, 0, 0, 0.20)",
"fill": true,
"borderColor": "rgba(255, 0, 0, 1.00)",
"borderWidth": 1,
"highRes": 5,
"offset": 0,
"counter": false,
"data": [
{
"x": 1620511200000,
"y": 696.44
},
{
"x": 1620597600000,
"y": 279.4
},
{
"x": 1620684000000,
"y": 349.35
},
{
"x": 1620770400000,
"y": 402.52
},
{
"x": 1620856800000,
"y": 420.69
},
{
"x": 1620943200000,
"y": 421.31
},
{
"x": 1621029600000,
"y": 324.91,
"c": 840
}
],
"stack": "Stack -2",
"yAxisID": "Steca_Leistung",
"pointRadius": 0,
"pointHoverRadius": 5,
"pointStyle": "circle",
"digits": 2
},
{
"Variable": 23579,
"label": "Calc.",
"type": "line",
"order": 0,
"backgroundColor": "rgba(0, 225, 255, 0.20)",
"fill": true,
"borderColor": "rgba(0, 225, 255, 1.00)",
"borderWidth": 1,
"highRes": 5,
"offset": 0,
"counter": false,
"data": [
{
"x": 1620511200000,
"y": 0
},
{
"x": 1620597600000,
"y": 0
},
{
"x": 1620684000000,
"y": 0
},
{
"x": 1620770400000,
"y": 0
},
{
"x": 1620856800000,
"y": 0
},
{
"x": 1620943200000,
"y": 0
},
{
"x": 1621029600000,
"y": 0,
"c": 840
}
],
"borderDash": [
5,
5
],
"stack": "Stack -3",
"yAxisID": "Steca_Leistung",
"pointRadius": 0,
"pointHoverRadius": 5,
"pointStyle": "circle",
"digits": 2
},
{
"Variable": 18678,
"label": "Bat",
"type": "line",
"order": 0,
"backgroundColor": "rgba(255, 149, 0, 0.10)",
"fill": true,
"borderColor": "rgba(255, 149, 0, 0.70)",
"borderWidth": 1,
"highRes": 5,
"offset": 0,
"counter": false,
"data": [
{
"x": 1620511200000,
"y": 54.49
},
{
"x": 1620597600000,
"y": 54.81
},
{
"x": 1620684000000,
"y": 53.28
},
{
"x": 1620770400000,
"y": 54.09
},
{
"x": 1620856800000,
"y": 54.84
},
{
"x": 1620943200000,
"y": 52.72
},
{
"x": 1621029600000,
"y": 54.53,
"c": 840
}
],
"stack": "Stack -4",
"yAxisID": "Steca_BatSpannung",
"pointRadius": 0,
"pointHoverRadius": 5,
"pointStyle": "circle",
"digits": 1
}
]
},
"options": {
"responsive": true,
"maintainAspectRatio": false,
"animation": {
"duration": 500,
"easing": "linear"
},
"hover": {
"animationDuration": 0
},
"responsiveAnimationDuration": 500,
"plugins": {
"tooltip": {
"enabled": true,
"position": "average",
"mode": "index",
"titleFontSize": 12,
"bodyFontSize": 12,
"footerFontSize": 12,
"titleFontFamily": "Roboto",
"bodyFontFamily": "Roboto",
"footerFontFamily": "Roboto",
"cornerRadius": 0,
"titleFontColor": "rgb(255, 255, 255)",
"bodyFontColor": "rgb(255, 255, 255)",
"footerFontColor": "rgb(255, 255, 255)",
"backgroundColor": "rgb(0, 0, 0)"
},
"title": {
"text": "Chart_Solar_Test",
"position": "top",
"fontSize": 12,
"fontFamily": "",
"display": false,
"fontColor": "rgb(0, 0, 0)"
},
"legend": {
"display": true,
"position": "top",
"align": "center",
"labels": {
"fontColor": "rgb(255, 255, 255)",
"fontSize": 12,
"boxWidth": 40,
"fontFamily": "Roboto"
}
}
},
"scales": {
"Steca_Leistung": {
"type": "linear",
"display": true,
"id": "Steca_Leistung",
"position": "left",
"axis": "y",
"Prefix": "",
"Suffix": " Watt",
"stacked": false,
"grid": {
"borderColor": "rgba(255, 255, 255, 1.00)",
"borderWidth": 1,
"color": "rgba(255, 255, 255, 1.00)",
"lineWidth": 1,
"drawBorder": true,
"drawOnChartArea": false,
"drawTicks": true
},
"ticks": {
"color": "rgba(255, 255, 255)",
"font": {
"size": 12,
"family": "Roboto"
},
"stepSize": 500
},
"min": 0,
"max": 3000,
"title": {
"display": true,
"text": " Watt",
"color": "rgba(255, 255, 255)",
"font": {
"size": 12,
"family": "Roboto"
}
}
},
"Steca_BatSpannung": {
"type": "linear",
"display": true,
"id": "Steca_BatSpannung",
"position": "right",
"axis": "y",
"Prefix": "",
"Suffix": " V",
"stacked": false,
"grid": {
"borderColor": "rgba(255, 255, 255, 1.00)",
"borderWidth": 1,
"color": "rgba(255, 255, 255, 1.00)",
"lineWidth": 1,
"drawBorder": true,
"drawOnChartArea": false,
"drawTicks": true
},
"ticks": {
"color": "rgba(255, 255, 255)",
"font": {
"size": 12,
"family": "Roboto"
}
},
"min": 42,
"max": 60,
"title": {
"display": true,
"text": " V",
"color": "rgba(255, 255, 255)",
"font": {
"size": 12,
"family": "Roboto"
}
}
},
"x": {
"time": {
"tooltipFormat": "DD.MM.YYYY HH:mm:ss",
"unit": "day",
"stepSize": 1,
"displayFormats": {
"day": "DD.MM"
}
},
"ticks": {
"font": {
"size": 12,
"family": "Roboto"
},
"color": "rgba(255, 255, 255)"
},
"type": "time",
"min": 1620511200000,
"max": 1621029601000,
"grid": {
"borderColor": "rgba(255, 255, 255, 1.00)",
"borderWidth": 1,
"tickColor": "rgba(255, 255, 255, 1.00)",
"tickWidth": 1,
"drawBorder": true,
"drawOnChartArea": false,
"drawTicks": true
},
"display": true
}
},
"layout": {
"padding": {
"left": 0,
"right": 0,
"top": 0,
"bottom": 0
}
}
}
}
解决方案
推荐阅读
- python - python2.7如何获取30分钟时隙
- css - 如何在 Next.js 中使用 CSS Houdini
- html - 矩形 720px 在手机 720 x 1280 上只有一半可见
- c++ - 我以前没有见过这样的代码,它是什么?
- javascript - React Native - 二维码生成器大小限制
- python - 是否可以制作一个可以读取文件的程序,但不能从程序外部打开文件?
- php - 如何在ajax post中使用特定的表格行数据
- javascript - 元素已附加但未显示在 nextElementSibling [更新]
- javascript - Redux 连接无法到达商店
- php - 如何在 PHP 中从映射的网络驱动器中定位文件?