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

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 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