让chartsjs显示数据键label而不是值

Question

I am having trouble with my chartsjs labels.我的chartsjs标签有问题。 my graph generates fine, I am trying to set the chart so that the data labels are for the text part of the data and not the numbers part.我的图表生成良好，我正在尝试设置图表，以便数据标签用于数据的文本部分而不是数字部分。 my code shows the data labels as 4, 6 and 2 where as i need them to show the text: me, you and them.我的代码将数据标签显示为 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

You can use the formatter function for this:您可以为此使用formatter function：

 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显示数据键label而不是值

问题描述

1 个解决方案

解决方案1
0 2021-11-24 15:08:15

让chartsjs显示数据键label而不是值

问题描述

1 个解决方案

解决方案1 0 2021-11-24 15:08:15

解决方案1
0 2021-11-24 15:08:15