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

Question

我正在chartjs中构建一个折线图，类似于这个

这是我所取得的成就：

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

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

代码笔链接

这是我的配置对象：

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"
        }]
    }
};

Answer 1

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

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

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

或为图表添加边距