Chart.js 未在條形頂部顯示值

Question

我前一段時間開始學習 chart.js，但在條形圖未顯示頂部條形圖的值的地方卡住了，如何在值后添加百分號？ 我使用 chart.js 3.3.2 cdn 順便說一句。 我需要幫助

let myChart = document.getElementById('myChart').getContext('2d');
const label = ['A','B','C','D','E'];
const datas = [85, 90, 53, 100, 76];
const backgroundColors = [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)'
];
const borderColors = [
    'rgba(255, 99, 132, 1)',
    'rgba(54, 162, 235, 1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)'
]

let iChart = new Chart(myChart, {
    type: 'bar',
    data: {
        labels: label,
        datasets: [{
            label: 'EQA-Übereinstimmung',
            data: datas,
            backgroundColor: backgroundColors,
            borderColor: borderColors,
            borderWidth: 1
        }]
    },
    options: {
        responsive:true,
        maintainAspectRatio: false,
        animation: {
            duration: 1,
            onComplete: function () {
                var chartInstance = this.chart,
                    myChart = chartInstance.myChart;
                    myChart.textAlign = 'center';
                    myChart.fillStyle = "rgba(0, 0, 0, 1)";
                    myChart.textBaseline = 'bottom';
                    // Loop through each data in the datasets
                    this.data.datasets.forEach(function (dataset, i) {
                        var meta = chartInstance.controller.getDatasetMeta(i);
                        meta.data.forEach(function (bar, index) {
                            var data = dataset.data[index];
                            myChart.fillText(data, bar._model.x, bar._model.y - 5);
                        });
                    });
            }
        }
            
    }
});

有人知道為什么嗎？

Answer 1

代碼有點過時，要向值添加百分號，您可以在 fillText 方法中使用字符串插值來添加它。

工作樣本：

 let myChart = document.getElementById('chartJSContainer').getContext('2d'); const label = ['A', 'B', 'C', 'D', 'E']; const datas = [85, 90, 53, 100, 76]; const backgroundColors = [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)' ]; const borderColors = [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)' ] let iChart = new Chart(myChart, { type: 'bar', data: { labels: label, datasets: [{ label: 'EQA-Übereinstimmung', data: datas, backgroundColor: backgroundColors, borderColor: borderColors, borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false, animation: { duration: 1, onComplete: (x) => { const chart = x.chart; var { ctx } = chart; ctx.textAlign = 'center'; ctx.fillStyle = "rgba(0, 0, 0, 1)"; ctx.textBaseline = 'bottom'; // Loop through each data in the datasets const metaFunc = this.getDatasetMeta; chart.data.datasets.forEach((dataset, i) => { var meta = chart.getDatasetMeta(i); meta.data.forEach((bar, index) => { var data = dataset.data[index]; ctx.fillText(`${data}%`, bar.x, bar.y - 5); }); }); } } } });

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script> </body>

Chart.js 未在條形頂部顯示值

問題描述

1 個解決方案

解決方案1
2 已采納 2021-06-19 08:29:08

Chart.js 未在條形頂部顯示值

問題描述

1 個解決方案

解決方案1 2 已采納 2021-06-19 08:29:08

解決方案1
2 已采納 2021-06-19 08:29:08