Chart.js 数据标签插件未显示在图表上

Question

我有一个来自 chart.js 的条形图，但我无法使用 chart.js 数据标签插件来显示图表中每个条形的值。

这是 chart.js 代码...chart.js 中的标签和数据是通过一个简单的 php 数组从外部谷歌表中提取的。

我的标题中引用了chart.js库，后面是chart.js datalabels插件库：

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


<canvas height="225vh" id="yield-comparison-bar-chart"></canvas>


<script type="text/javascript">
    new Chart(document.getElementById("yield-comparison-bar-chart"), {
        type: 'bar',
        data: {
          labels: [
          '<?php echo $holdings_array[29][3]; ?>', 
          '<?php echo $holdings_array[29][4]; ?>', 
          '<?php echo $holdings_array[29][5]; ?>', 
          '<?php echo $holdings_array[29][6]; ?>', 
          '<?php echo $holdings_array[29][7]; ?>', 
          '<?php echo $holdings_array[29][8]; ?>', 
          '<?php echo $holdings_array[29][9]; ?>',
          ],
          datasets: [
            {
              label: "Distribution Yield (%)",
              backgroundColor: ["#003b5c", "#b0ced8","#b0ced8","#b0ced8","#b0ced8","#b0ced8","#b0ced8"],
              data: [
                   <?php echo number_format(floatval($holdings_array[30][3]),2); ?>,
                   <?php echo number_format(floatval($holdings_array[30][4]),2); ?>,
                   <?php echo number_format(floatval($holdings_array[30][5]),2); ?>,
                   <?php echo number_format(floatval($holdings_array[30][6]),2); ?>,
                   <?php echo number_format(floatval($holdings_array[30][7]),2); ?>,
                   <?php echo number_format(floatval($holdings_array[30][8]),2); ?>,
                   <?php echo number_format(floatval($holdings_array[30][9]),2); ?>,]
            }
          ]
        },
        options: {
          legend: { display: false },
          title: {
            display: false,
            text: ''
          },
          plugins: {
          datalabels: {
             display: true,
             color: '#333',
             align: 'center',
             anchor: 'center'
          }
       },
          scales: {
                yAxes: [{
                    ticks: {
                        // Include a % sign in the ticks
                        callback: function(value, index, values) {
                            return value + '%';
                           
                        },
                    gridLines: {
                        display: false,
                        drawBorder: false,
    
                    },    
                    }
                }],
                xAxes: [{
                    gridLines: {
                        display: false,
                        drawBorder: false,
    
                    },    
                }]
            } 
        }
    });
    </script>

我希望每个条的值都显示在它们上面