如何删除 Chart.js x Axis 底线？答案

【问题标题】：How to remove the Chart.js x Axis bottom line?如何删除 Chart.js x Axis 底线？
【发布时间】：2019-04-11 03:38:54
【问题描述】：

我正在使用 Chart.js 2.8.0 试图摆脱 X/Y 轴边框。使用gridLines { showBorder: false }} 我仍然可以看到 X 轴边框。我还将颜色设置为 0 alpha，X 和 Y 上的所有其他线都消失了，除了 X 轴上的底部不会消失。尝试其他一些选项，例如 drawBorder: false 和 scaleLineColor: "rgba(0,0,0,0)", 没有影响 X 轴的底线。

这是我的图表配置

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

【问题讨论】：

How to remove the line/rule of an axis in Chart.js?的可能重复
没有。如上所述，我在该问题中使用的解决方案未成功。

标签： javascript chart.js chart.js2

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

谁在使用 recharts 模块的这个答案：

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

【讨论】：

【解决方案3】：

如果有人正在使用 v3 并正在寻找答案，请联系 options.scales.x.grid.drawBorder: false

这是在 v3.7.1 上通过查看打字稿文件并尝试任何看起来相关的东西完全偶然发现的。

【讨论】：