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

时间:2019-04-11 03:38:55

标签: javascript chart.js chart.js2

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

这是我的图表配置

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

1 个答案:

答案 0 :(得分:2)

经过一段时间的摆弄,我发现了解决方案zeroLineColor:“透明”可以解决问题。在这里https://github.com/chartjs/Chart.js/issues/3950

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