带有 chartjs-plugin-datalabels 的 ChartJSNodeCanvas 在第一个图表之后发布标签

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

我有一个使用 ChartJSNodeCanvas 创建图表的 nodejs 服务器函数。我用它来创建几个图表,然后放入 pdf 文件中。 我要求将值放在条形图条的顶部(如第一张图片示例所示)。为此,我正在使用 chartjs-plugin-datalabels。第一张图表完全按照预期工作,但从第二张图表开始,结果是错误的,如第二张图片示例所示。我试图改变很多选项,在网上做了很多研究,但我找不到解决方案。

这里是我的代码

const { ChartJSNodeCanvas } = require('chartjs-node-canvas')
const canvas = require('canvas'); // point
const ChartDataLabels = require('chartjs-plugin-datalabels');


export async function createPlot(dataset) { 

  const width = dataset.isByGroup ? 500 : 680
  const height = dataset.isByGroup ? 280 : 200

  const chartJSNodeCanvas = new ChartJSNodeCanvas({   
    width: width,
    height: height,
    chartCallback: (ChartJS) => {
      ChartJS.defaults.font.family = 'NotoSansJP-Black'; 
      ChartJS.register(ChartDataLabels)
    }   
  }); 
   
  chartJSNodeCanvas.registerFont(__dirname + '/fonts/NotoSansJP-Black.otf', { family: 'NotoSansJP-Black' }); 

  ....


  dataset.rows.forEach((row, i) => {

    let rowDatasets = {
      label: row,
      backgroundColor: colors[i],
      borderColor: colors[i],
      borderWidth: 1,
      maxBarThickness: 20,
      data: dataset.values[i]
    }

    datasets.push(rowDatasets)
  })

  const configuration = {
    type: 'bar',
    plugins: [ChartDataLabels],
    data: {
      labels: dataset.keywords,
      datasets: datasets
    },
    options: {
      devicePixelRatio: 3,
      plugins: {
        datalabels: {
          anchor: 'end',
          align: 'top',                 
          labels: {
            value: {
              font: {
                size: 8,
                lineHeight: 1                        
              },
              color: 'black'
            }
          }
        },
        title: {
          display: true,
          text: dataset.title,
          font: {
            size: 8,            
          }
        },
        legend: {
          position: 'bottom',
          display: !dataset.isByGroup,
          labels: {
            color: 'black',
            boxWidth: 5,
            boxHeight: 5,
            font: {
              size: 10
            }
          }
        }
      },
      scales: {
        x: {
          ticks: {
            color: '#2f2f2f',
            font: {
              size: 7
            }
          }
        },
        y: {
          min: 0,
          max: max,
          ticks: {
            stepSize: 1,
            color: '#2f2f2f',
            font: {
              size: 7
            }
          }
        }
      }
    },
  }

  const image = await chartJSNodeCanvas.renderToBuffer(configuration)

  return `data:image/png;base64,${image.toString('base64')}`
}

有人知道吗?

第一张图表:预期结果(我只在第一张图表上做对)

第二张图表:第一次创建图表后我得到了什么

click here for picture  example

node.js chart.js node-canvas chart.js-datalabels
© www.soinside.com 2019 - 2024. All rights reserved.