数据标签未显示在 Chart.js 上

Question

我试图在 Chart.js 的顶部显示总金额；我正在尝试使用 datalabel 插件，但我不确定为什么它不显示标签，我没有收到任何错误，这是我的代码：

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>
<canvas id="myChart" width="850" height="520"></canvas>
<script>
var ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
Chart.defaults.set('plugins.datalabels', {
  color: '#FE777B'
});
var myChart = new Chart(ctx, {
    type: 'bar',
    plugins: [ChartDataLabels],
    data: {
        datasets: [{
            data: <?php print_r($barData); ?>,
            label: 'Advisor Closed MTD',
            backgroundColor: 'rgb(192,111,94)',
            barThickness: 25,
            datalabels: {
                color: '#FFCE56'
            }
            
        }],
    },
    options: {
        responsive: false,
        plugins: {
            datalabels: {
                color: 'blue'
            }
        }
    }
});
</script>

该图表显示了正确的信息，但标签根本没有显示。

Answer 1

标签正在显示，它们位于条形本身中，要将它们显示在条形顶部，您需要像这样配置它：

options: {
      responsive: false,
      plugins: {
        datalabels: {
          anchor: 'end',
          align: 'end',
          labels: {
            value: {
              color: 'blue'
            }
          }

        }
      }
    }

例子：

options: {
      responsive: false,
      plugins: {
        datalabels: {
          anchor: 'end',
          align: 'end',
          labels: {
            value: {
              color: 'blue'
            }
          }

        }
      }
    }