如何在使用Chart.js的組條形圖中減少數據集的寬度

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>