ChartJs 3.2.1 时间刻度以错误的开始日期开始

时间:2021-05-15 12:06:27

标签: javascript chart.js

随着从 ChartsJs V2.8.4 到 3.2.1 的更改,我遇到了 X 轴(时间类型)启动不正确的问题,不幸的是我不知道问题出在哪里。下面我附上了 2 张图片,应该表明问题以及图表的配置。

如果我删除 x.time.unit 选项,它也会正确启动。

我会很高兴你的想法。 感谢您的帮助。

With Unit setWithout Unit Set

我的图表配置

{
"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
        }
    }
}

}

0 个答案:

没有答案
相关问题