将y轴上的零与chartjs中折线图的x轴上的标签对齐答案

【问题标题】：Aligning zero on y axis to the labels on x axis of line chart in chartjs将y轴上的零与chartjs中折线图的x轴上的标签对齐
【发布时间】：2021-03-12 09:25:51
【问题描述】：

我在chartjs中建一个折线图，类似于this

这是我取得的成就：

如何使 y 轴上的零与 x 轴上的标签处于同一水平。

我几乎尝试了 chartjs 文档中的所有内容，但似乎没有任何效果

Codepen link

这是我的配置对象：

var config = {
    type: 'line',
    options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: { display: false },
        scales: {
            xAxes: [{
                gridLines: {
        drawBorder: false,
                    color: "#EEEEEE",
                    beginAtZero: false,
                    zeroLineColor: 'transparent'
                },
                ticks: {
                    fontColor: "#9A9A9A",
                    fontStyle: '600',
                    fontSize: 15
                }
            }],
            yAxes: [
                {
                    gridLines: {
                        color: "#EEEEEE",
                        beginAtZero: false,
                        zeroLineColor: 'transparent',
                        drawBorder: false
                    },
                    ticks: {
                        max: 30,
                        min: 0,
                        stepSize: 5,
                        fontColor: "#9A9A9A",
                        fontStyle: '505',
                        fontSize: 14
                    }
                },
            ]
        }
    },
    data: {
        labels: ["", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
        datasets: [{
            data: [null, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
            showLine: true,
            lineTension: 0,
            fill: false,
            pointRadius: 4,
            borderWidth: 2,
            pointBackgroundColor: "#FFFFFF",
            backgroundColor: "transparent",
            borderColor: "#973490"
        }]
    }
};

【问题讨论】：

标签： javascript reactjs chart.js chart.js2 react-chartjs-2

【解决方案1】：

第一个图表是时间序列图表。这是你想要完成的吗？

使用线性轴图，您可以将[null, null, null] 添加到您的数据数组中并具有相应的 xaxis 值。这将在最后留下空间。

或者在选项中使用 offset 属性可能会有所帮助

或者给图表添加边距

【讨论】：

是的，我正在努力完成准确的图表。我已经为 x 轴添加了 offset:true
能否请您详细解释一下其他两种方法。
我已将问题编辑为更具体的问题，请提供帮助。