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

问题描述

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

这是我取得的成就：

如何使 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",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,showLine: true,lineTension: 0,fill: false,poinTradius: 4,borderWidth: 2,pointBackgroundColor: "#FFFFFF",backgroundColor: "transparent",borderColor: "#973490"
        }]
    }
};

解决方法

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

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

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

或在图表中添加边距