让 chartsjs 显示数据标签的键而不是值

Question

我的 chartsjs 标签有问题。我的图表生成很好，我正在尝试设置图表，以便数据标签用于数据的文本部分而不是数字部分。我的代码将数据标签显示为 4、6 和 2，因为我需要它们来显示文本：我、你和他们。

<script>
                        var ctx = document.getElementById('myChart4').getContext('2d');
                        var myChart4 = new Chart(ctx, {
                            plugins: [ChartDataLabels],
                            type: 'doughnut',
                            data: {
                                labels: ['me','you','them'
             
                                ],
                                datasets: [{
                                    label: false,
                                    data: [4,6,2
                                 
                                    ],

                                  

                                }]
                            },
                            options: {
                            responsive: false,
                                plugins: {
                                    datalabels: {
                                        color: 'black',
                                        anchor: 'end',
                                        align: 'end',
                                        offset: 15
                                    },


                                    legend: {
                                    display: false
                                    },
                                    title: {
                                        display: true,
                                        text:'Reason'

                                        }
                                    },
                                    responsive: false,
                                    onClick: (evt, activeEls) => {
                                        show();
                                        
                                    },

                            }
});

Answer 1

您可以为此使用 formatter 函数：

Chart.register(ChartDataLabels)

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'orange'
    }]
  },
  options: {
    plugins: {
      datalabels: {
        color: 'black',
        anchor: 'end',
        align: 'end',
        offset: 15,
        formatter: (val, ctx) => (ctx.chart.data.labels[ctx.dataIndex])
      },
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>
</body>

让 chartsjs 显示数据标签的键而不是值

getting chartsjs to show key of data label instead of value

javascript

chart.js

chartjs-2.6.0