Chart.js 条形图:如何在 v2.3 中删除条形之间的空间?

2022-01-22 00:00:00 javascript chart.js

我正在尝试删除条形图条之间的空间,但即使我在很多地方都看到了这种解决方案,但它对我不起作用.Chart.js 文档中也没有提到它,所以这很奇怪.谁能告诉我如何指定它?

I'm trying to remove the space between my bar chart bars, but even though I see this solution many places it doesn't work for me. It's also not mentioned in the Chart.js docs so that is odd. Can someone tell me how to specify it?

var options = {
    barValueSpacing : 1,        // doesn't work; find another way
    barDatasetSpacing : 1,      // doesn't work; find another way

    legend: {
        display: false          // Hides annoying dataset label
    },
    tooltips: {
        callbacks: {
            label: function(tooltipItem) {
                return tooltipItem.yLabel;
            }
        }
    }
};

var ctx = document.getElementById("canvasX").getContext("2d");          
var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

推荐答案

需要在x上设置barPercentagecategoryPercentage1.0轴刻度.将此添加到您的 options 对象:

You need to set barPercentage and categoryPercentage to 1.0 on the x-axis scale. Add this to your options object:

var options = {
    ...
    scales: {
        xAxes: [{
            categoryPercentage: 1.0,
            barPercentage: 1.0
        }]
    }
};

参见 http://www.chartjs.org/docs/#bar-chart-chart-options

相关文章