Chart.js 3.6.0版本X/Y轴标签设置及升级后失效问题问询

失效原因 #

Chart.js 2.x 升级到 3.x 存在大量破坏性配置变更，原有代码使用的是2.x的配置规范，不符合3.x的语法要求，核心需要调整的内容如下：

• 轴配置结构调整：废弃原scales.xAxes/scales.yAxes数组格式，改为直接通过scales.x、scales.y声明单轴配置，无需包裹数组
• 轴标签配置更名：原轴标签配置项scaleLabel更名为title，属性labelString更名为text
• 关联配置更名：原网格线配置gridLines更名为grid，原提示框配置tooltips更名为tooltip，提示框文字颜色属性也同步更名

修改后完整可用代码 #

function create_line_chart(ctx, x_axis, version_1, y_axis_1, version_2, y_axis_2) {
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: x_axis,
            datasets: [{
                label: version_1,
                data: y_axis_1,
                backgroundColor: 'transparent',
                borderColor: 'rgba(220,53,69,0.75)',
                borderWidth: 3,
                pointStyle: 'circle',
                pointRadius: 5,
                pointBorderColor: 'transparent',
                pointBackgroundColor: 'rgba(220,53,69,0.75)',
            }, {
                label: version_2,
                data: y_axis_2,
                backgroundColor: 'transparent',
                borderColor: 'rgba(40,167,69,0.75)',
                borderWidth: 3,
                pointStyle: 'circle',
                pointRadius: 5,
                pointBorderColor: 'transparent',
                pointBackgroundColor: 'rgba(40,167,69,0.75)',
            }]
        },
        options: {
            responsive: true,
            font: {
                family: 'Montserrat'
            },
            tooltip: {
                mode: 'index',
                titleFontSize: 12,
                titleColor: '#000',
                bodyColor: '#000',
                backgroundColor: '#fff',
                cornerRadius: 3,
                intersect: false,
            },
            legend: {
                display: false,
                labels: {
                    usePointStyle: true,
                },
            },
            scales: {
                x: {
                    display: true,
                    grid: {
                        display: false,
                        drawBorder: false
                    },
                    title: {
                        display: true,
                        text: 'Time'
                    }
                },
                y: {
                    display: true,
                    grid: {
                        display: false,
                        drawBorder: false
                    },
                    title: {
                        display: true,
                        text: 'Value'
                    }
                }
            },
            title: {
                display: false,
                text: 'Normal Legend'
            }
        }
    });
}

var ctx = document.getElementById("canvas");
ctx.height = 150;
create_line_chart(ctx,  [2010, 2011, 2012, 2013, 2014, 2015, 2016],
    194,
    [0, 30, 10, 120, 50, 63, 10],
    221,
    [0, 50, 40, 80, 40, 79, 120],
);

内容的提问来源于stack exchange，提问作者Beliaev Maksim