程序员经验分享-hwhale

让图表js显示数据标签的键而不是值

2024-01-09

我的 Chartjs 标签遇到问题。 我的图表生成得很好，我正在尝试设置图表，以便数据标签适用于数据的文本部分，而不是数字部分。我的代码将数据标签显示为 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();
                                        
                                    },

                            }
});

您可以使用formatter https://chartjs-plugin-datalabels.netlify.app/guide/formatting.html#formatting为此功能：

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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

chartjs

chartjs260

让图表js显示数据标签的键而不是值 的相关文章

随机推荐

热门标签