在图表中显示条形图值 - ChartJS

Question

能否请您告诉我如何在条形图中显示条形中的值，如下所示。我使用的是 ChartJS 3.6 版本。

我试过下面的代码，没用

const chartOptions = {
            responsive: false,
            plugins: {
                legend: {
                    display: false,
                },
                datalabels: {
                    display: true,
                    align: 'center',
                    anchor: 'center',
                },
            },
        }

Answer 1

删除 datalabels: "center" 和 anchor: "center"

Answer 2

要使数据标签插件正常工作，您需要安装并注册它：

捆绑器：

npm install chartjs-plugin-datalabels

import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.register(ChartDataLabels);

脚本标签：

<script src="https://cdn.jsdelivr.net/npm/chart.js@3/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

Chart.register(ChartDataLabels);

Answer 3

请查看下面的可运行代码，看看如何用 chartjs-plugin-datalabels 完成它。

Chart.register(ChartDataLabels);
new Chart("barChart", {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: 'Data',
      data: [5, 8, 24, 14],
      backgroundColor: 'rgb(124, 124, 255)',
      barPercentage: 0.5
    }]
  },
  options: {
    plugins: {
      datalabels: {
        color: 'white',
        font: {
          weight: 'bold'
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<canvas id="barChart"></canvas>

在图表中显示条形图值 - ChartJS

Display Bar chart values in the graph - ChartJS

bar-chart

chart.js