javascript - 如何减少使用chartjs的组条形图中数据集的宽度

Question

如何在使用 chartjs 的组条形图中减小数据集的宽度。在屏幕截图中，我用红线显示了需要减小的宽度。如果我们可以使用 chartjs 本身来做到这一点会更好，如果不是其他替代方案也欢迎。我指的是这个库http://www.chartjs.org/docs/latest/charts/bar.html

红线显示我需要减少的宽度

Answer 1

该属性存储在 x 轴中，您只需要像下面一样配置 x 轴

var options = {
    scales: {
        xAxes: [{
            categoryPercentage: 1.5
        }]
    }
}

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "Sample Dataset",
        backgroundColor: "rgba(255,0,0,0.4)",
        borderColor: "rgba(75,192,192,1)",
        data: [65, 59, 75, 81, 56, 55, 40],
    }]
};

var ctx = document.getElementById("barChart");
var barChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            xAxes: [{
                // Change here
                barPercentage: .5,
            	  categoryPercentage: 1.5
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="barChart"></canvas>