如何删除Chart.js x轴底线?

qltillow  于 2022-12-13  发布在  Chart.js
关注(0)|答案(4)|浏览(195)

我正在使用Chart.js2.8.0尝试去除X/Y轴边框。使用gridLines { showBorder: false }}时,我仍然看到X轴边框。我还将颜色设置为0alpha,X和Y上的所有其他线都消失了,除了X轴上最下面的一条线不会消失。尝试一些其他选项,如drawBorder: falsescaleLineColor: "rgba(0,0,0,0)",,但没有影响X轴上的底线。x1c 0d1x
这是我的图表配置

type: 'line',
    data: {
        datasets: [{
            label: '',
            data: [],
            backgroundColor: [],
            borderWidth: 1
        }]
    },
    options: {
        scaleLineColor: "rgba(0,0,0,0)",
        layout: {
            padding: {
            top: 20
            }
        },
        legend: {
            display: false
        },
        scales: {
            gridLines: {
                showBorder: false
            },
            xAxes: [{
                gridLines: {
                    color: "rgba(0, 0, 0, 0)",
                }
            }],
            yAxes: [{
                gridLines: {
                    color: "rgba(0, 0, 0, 0)",
                },
                ticks: {
                    beginAtZero: true,
                    display: false,
                }
            }]
        }
    }
};
sz81bmfz

sz81bmfz1#

经过一段时间摆弄它,我已经找到了解决方案zeroLineColor:“transparent”成功了。在这里找到了它https://github.com/chartjs/Chart.js/issues/3950

scales: {
            xAxes: [{
                gridLines: {
                    zeroLineColor: 'transparent'
                },
            }],
tag5nh1u

tag5nh1u2#

如果有人在v3上寻找答案,那就是options.scales.x.grid.drawBorder: false
这是在v3.7.1上通过查看typescript文件并尝试任何看起来相关的内容完全意外地发现的。

relj7zay

relj7zay3#

对于使用重新绘制图表模块的用户,此答案为:

<XAxis strokeOpacity={0} dataKey="name" />
mum43rcc

mum43rcc4#

对于任何在v5中寻找答案的人来说,答案是:options.scales.x.border.display: false;

相关问题