给条形图添加标签：chartjs答案

【问题标题】：Add labels to bar chart: chartjs给条形图添加标签：chartjs
【发布时间】：2021-09-12 10:28:40
【问题描述】：

我正在使用 chartjs 3.5.1 创建条形图，而且我是 chartjs 的新手。我想为条形图中的每个条形添加值标签。

我已经查看了一些相关答案，但它们要么太旧要么太复杂而无法实现。

以下是预期的结果，注意非手写部分是我实现的。

代码如下：

let chart2 = new Chart('chart2', {
  type: 'bar',
  data: {
    labels: ["a", "b", "c", "d"],
    datasets: [{
      data: [500, 400, 300, 200],
      }]
  },
  options: {
    indexAxis: 'y',
    plugins: {
      title: {
        display: true,
        text: "Graph"
      },
      legend: {
        display: false,
      }
    },
    scales: {
      y: {
        grid: {
          display: false
        },
      },
      x: {
        grid: {
          display: false
        }
      }
    }
  },

});

非常感谢您的帮助！

【问题讨论】：

标签： chart.js

【解决方案1】：

您可以使用chartjs-plugin-datalabels 库。

首先您必须register 插件，然后您可以在options.plugins.datalabels 中定义所需的选项。

请查看您修改后的代码，看看它是如何工作的。

Chart.register(ChartDataLabels);
new Chart('chart2', {
  type: 'bar',
  data: {
    labels: ["a", "b", "c", "d"],
    datasets: [{
      data: [500, 400, 300, 200],
    }]
  },
  options: {
    indexAxis: 'y',
    layout: {
      padding: {
        right: 60
      }
    },
    plugins: {
      title: {
        display: true,
        text: "Graph"
      },
      legend: {
        display: false,
      },
      datalabels: {
        color: 'blue',
        anchor: 'end',
        align: 'right',
        labels: {
          title: {
            font: {
              weight: 'bold'
            }
          }
        }
      }
    },
    scales: {
      y: {
        grid: {
          display: false
        },
      },
      x: {
        grid: {
          display: false
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chart2" height="100"></canvas>

【讨论】：