如何以像素為單位獲取條形圖寬度

Question

我正在使用chartjs最新版本（2.6.0）。 我只是有一個簡單的問題，我想獲得每個條形寬度，但是我找不到任何答案。 有人可以幫我嗎。 非常感謝。 這是簡單的條形圖。

 var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3] }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas class="canvasChart" id="myChart"></canvas> 

Answer 1

你可以在每個ChartJS條的寬度（基本一致），用.getDatasetMeta()方法。

 var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3] }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); function getWidth() { var barWidth = myChart.getDatasetMeta(0).data[0]._view.width; alert(barWidth); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <button onclick="getWidth()">Get Bar Width</button> <canvas class="canvasChart" id="myChart"></canvas>