如何使用 chartjs-plugin-datalabels 显示数据标签

问题描述 投票:0回答:0

基本上我正在使用图表 js-node-canvas 创建图表,在此图表中我想在图表上显示我的数据值

我提到了所需图表的图像 在我的图表上显示数据标签(数据)的任何建议或修改都会有所帮助谢谢。

 data: {
          labels: labels,
          datasets: [{
            data: data,
            backgroundColor: ['red', 'blue', 'yellow', 'green', 'purple', 'orange']
          }]
        },.

我想显示此 >> 数据集中提到的数据:

**[{data: data**
在我的图表中

图表图像

我生成图表的功能是这样的。

 async  generateChart(data, labels, centerText) {
    const chartjsPluginDatalabels = require('chartjs-plugin-datalabels');
    try {
      const width = 250;
      const height = 250;
      const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height });
      const configuration = {
        type: 'doughnut',
        data: {
          labels: labels,
          datasets: [{
            data: data,
            backgroundColor: ['red', 'blue', 'yellow', 'green', 'purple', 'orange']
          }]
        },
        options: {
          plugins: {
            datalabels: {
              color: 'white',
              font: {
                size: 16
              },
              formatter: function(value, context) {
                return context.chart.data.labels[context.dataIndex] + ': ' + value;
              }
            }
          },
          cutout: '80%',
          circumference: 1 * Math.PI,
          rotation: -Math.PI,
          layout: {
            padding: {
              top: 20,
              bottom: 20
            }
          },
          responsive: false,
          maintainAspectRatio: false
        }
      };
      const dataUrl = await chartJSNodeCanvas.renderToDataURL(configuration, { toBase64: true });
      const base64Image = dataUrl;
      return base64Image;
    } catch (err) {
      console.log('Error generating chart:', err);
      throw err;
    }
  }```
javascript node.js charts chart.js
© www.soinside.com 2019 - 2024. All rights reserved.