Question

我在Chart.js中创建了一个水平分组的条形图，但我遇到了一个奇怪的问题。问题是，当我禁用所有网格线和边框时，图表仍然显示一条顶部水平线，我想摆脱它。在此屏幕截图中可以看到：http://imgur.com/41YGxA8。我还制作了一个JSFiddle：https://jsfiddle.net/bsocw1v9/

function create_horizontal_bar_chart(){
/**
 * Draw the chart on the correct canvas. Add the correct data sets
 * and set the correct draw type.
 */
let ctx = document.getElementById('monthly_subscription_revenue_chart').getContext("2d");
let data = {
labels: ['Diensten'],
datasets: [
    {
        type: 'horizontalBar',
        backgroundColor: "rgb(0,33,86)",
        data: [2250],
        stack: 1
    },
    {
        type: 'horizontalBar',
        backgroundColor: "rgb(219,219,219)",
        data: [3000],
        stack: 2
    },
    {
        type: 'horizontalBar',
        backgroundColor: "rgb(240,95,0)",
        data: [750],
        stack: 3
    },
]
};
new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    showScale: false,
    options: {
        legend: {
            display: false
        },
        tooltips: {
            enabled: false
        },
        hover: {
            mode: null
        },
        scales: {
            xAxes: [{
                stacked: true,
                display: false,
                gridLines: {
                    drawBorder: false,
                },
            }],
            yAxes: [{
                stacked: true,
                barPercentage: 0.9,
                gridLines: {
                    drawBorder: false,
                },
            }]
        }
    }
});

}

我希望有人可以帮我解决这个问题，因为我根本无法弄清楚是什么导致了这个问题。

Answer 1

您只在图表边缘禁用了边框（通过将drawBorder设置为false），而不是网格线。错误的线是网格线。要禁用轴的网格线：

gridLines: {
    display: false
}

查看“网格线配置”下的docs。

删除水平条形图中的顶部水平线（Chart.js 2）

1 个答案: