如何在使用Chart.js的组条形图中减少数据集的宽度

Question

如何在使用chartjs的组条形图中减小数据集的宽度。 在屏幕截图中，我以红色线条显示了需要减小的宽度。 如果我们可以使用chartjs本身做到这一点，那就更好了。 我指的是这个图书馆http://www.chartjs.org/docs/latest/charts/bar.html

Red line shows which width I need to reduce

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>