Chart.js中如何知道單杠的長度

Question

我的項目中有一個單杠（我使用chart.js ）。 我需要知道它的長度（以像素為單位）。 怎么做？

Answer 1

您可以使用插件核心 API 。 它提供了不同的鈎子，可用於執行自定義代碼。 在下面的代碼片段中，我使用afterDraw鈎子記錄各個條的像素數。

 const chart = new Chart(document.getElementById('myChart'), { type: 'horizontalBar', plugins: [{ afterDraw: chart => { var ctx = chart.chart.ctx; var xAxis = chart.scales['x-axis-0']; chart.config.data.datasets[0].data.forEach((value, index) => { console.log('index ' + index + ': ' + Math.round(xAxis.getPixelForValue(value)) + 'px'); }); } }], data: { labels: ['A', 'B', 'C', 'D'], datasets: [{ label: 'By Dataset', data: [15, 8, 12, 18], backgroundColor: 'blue' }] }, options: { scales: { xAxes: [{ ticks: { beginAtZero: true } }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="myChart" height="90"></canvas>