Saya perlu menulis teks pada bar dalam carta menggunakan chart.js
var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data:data, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } }, responsive : true, showTooltips : false, showInlineValues : true, centeredInllineValues : true, tooltipCaretSize : 0, tooltipTemplate : "<%= value %>" });
Kod di atas tidak berfungsi...
Saya perlukan sesuatu seperti ini:
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jika anda ingin memaparkan teks berpusat untuk setiap elemen, terdapat cara yang lebih mudah:
Chart.helpers.each(meta.data.forEach(function (bar, index) { var centerPoint = bar.getCenterPoint(); ctx.fillText(dataset.data[index], centerPoint.x, centerPoint.y)); }),this)Nampaknya'getCenterPoint' tidak tersediadalam versi 2.1.3 (yang anda gunakan dalam contoh anda). Saya mencubanya dengan 2.5.0 dan ia berkesan
Tambahkan kod ini pada objek pilihan anda:
animation: { onComplete: function () { var chartInstance = this.chart; var ctx = chartInstance.ctx; console.log(chartInstance); var height = chartInstance.controller.boxes[0].bottom; ctx.textAlign = "center"; Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) { var meta = chartInstance.controller.getDatasetMeta(i); Chart.helpers.each(meta.data.forEach(function (bar, index) { ctx.fillText(dataset.data[index], bar._model.x, height - ((height - bar._model.y) / 2)); }),this) }),this); } }https://jsfiddle.net/h4p8f5xL/
Kemas kini 2
Lilingi kanvas dengan bekas dengan lebar dan ketinggian yang diingini
Dan tambahkan yang berikut pada objek pilihan anda