chartjs 3.6.0 添加 X 标签

Question

我在图表 2.2.1 中使用了以下代码，它运行良好，我们可以看到标签 Time。
现在出于安全原因我们想升级到 3.6.0，但是代码片段停止工作了。我附上 2 个小提琴
工作 2.2.1：https://jsfiddle.net/maksim_beliaev/2ru3g5ot/8/
不工作 3.6.0：https://jsfiddle.net/maksim_beliaev/q2poncyd/5/

如何使用新的 chartjs 设置 X 轴和 Y 轴的标签？在 Axis 和 Labels 的在线文档中，语法应该是正确的

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,
            type: 'line',
            defaultFontFamily: 'Montserrat',
            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,

            tooltips: {
                mode: 'index',
                titleFontSize: 12,
                titleFontColor: '#000',
                bodyFontColor: '#000',
                backgroundColor: '#fff',
                titleFontFamily: 'Montserrat',
                bodyFontFamily: 'Montserrat',
                cornerRadius: 3,
                intersect: false,
            },
            legend: {
                display: false,
                labels: {
                    usePointStyle: true,
                    fontFamily: 'Montserrat',
                },
            },
            scales: {
                xAxes: [{
                    display: true,
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Time'
                    }
                }],
                yAxes: [{
                    display: true,
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: '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],
            );

Answer 1

Chart.js v3 与 Chart.js v2 相比有很多 API 变化，您应该像这样传递您的标题配置：

const titleConfig = {
    scales: {
        x: {
            display: true,
            title: {
                display: true,
                text: "Time",
                padding: { top: 20, left: 0, right: 0, bottom: 0 },
            },
        },
        y: {
            display: true,
            title: {
                display: true,
                text: "Value",
                padding: { top: 30, left: 0, right: 0, bottom: 0 },
            },
        },
    },
};

有关如何使用标题配置的更多信息，请参见 documentation。
这是一个有效的 fiddle：https://jsfiddle.net/vkghzxLc/15/

Answer 2

基本上你的整个选项对象都是错误的，chart.js v3 中有一些重大的突破性变化。对于所有更改，请阅读 migration guide。

显示比例标签需要在options.scales.x.title.text中配置，tooltip和legend也需要在plugins命名空间中配置，tooltip已设为单数

chartjs 3.6.0 添加 X 标签

chartjs 3.6.0 add X label

javascript

chart.js