Chart.js 未在条形图顶部显示值答案

【问题标题】：Chart.js not showing value on top of barsChart.js 未在条形图顶部显示值
【发布时间】：2021-06-19 02:14:40
【问题描述】：

我前段时间开始学习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);
                        });
                    });
            }
        }
            
    }
});

有人知道为什么吗？

【问题讨论】：

我找不到使用原生 charts.js 做你想做的事的例子。看起来你需要一个插件：stackoverflow.com/questions/31631354/…

标签： javascript chart.js bar-chart

【解决方案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>

【讨论】：