我如何在 chart.js 与 3.x 的图表中增加柱形值

Question

预期结果

我正在尝试将图表的值放在每个柱的顶部。我试过其中一个例子 Adding custom text to Bar Chart label values using Chart.js。但它没有用。还在 html 页面

中添加了脚本

<div>
         canvas id="myChart1_1"></canvas>
 </div>
         
  <script src="static/graphs.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>"

graph.js 包含代码。

const labels1_1 = ['1','2','3', '4', '5','6','7', '8','9+'];
const data1_1 = {
  labels: labels1_1,
  datasets: [{
    label: 'Trucks',
    data: [1,2,3, 4, 5,6,7, 8,9],
    backgroundColor: '#4472C4',
    borderColor: '#4472C4',
    borderWidth: 1
  }]
};  
const config1_1 = {
    type: 'bar',
    data: data1_1,
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Number of SS vs Number of Trucks'
            },
            datalabels: {
              align: 'end',
              anchor: 'end',
              backgroundColor: '#3472C4' 
              },               
        },
    
      scales: {
               
        y: {
            display:true,
          beginAtZero: true,
          title: {
              display: true,
              text: 'SS'
          }
          
        },
                
      }
    },
  };

const myChart1_1 = new Chart(
    document.getElementById('myChart1_1'), config1_1);

Answer 1

数据标签是因为 V2（数据标签）和 V3（Chart.js）不再可以自行注册。

因此，在 graph.js 文件的顶部，您需要像这样注册数据标签插件：

Chart.register(ChartDataLabels);

我如何在 chart.js 与 3.x 的图表中增加柱形值

how can i add value on bar in the charts in chart.js vs 3.x

chart.js