ChartJS标签字体放大挤在一起：本地正常Azure部署异常

我有一个Node.js应用，用于生成ChartJS图表图片。本地环境下标签显示正常（本地正常标签效果：），但将完全相同的代码部署到Azure后，标签出现放大且挤在一起的问题（Azure部署异常标签效果：）。

我的依赖如下：

"dependencies": { "chart.js": "2.7.3", "chartjs-node-canvas": "3.2.0" }

图表配置代码：

options: {
    maintainAspectRatio: false,
    legend: {
        display: false
    },
    tooltips: {
        enabled: false
    },
    animation: {
        duration: 0
    },
    elements: {
        line: {
            cubicInterpolationMode: 'monotone'
        }
    },
    scales: {
        xAxes: [{
            type: 'linear',
            display: true,
            ticks: {
                autoSkip: true,
                fontColor: gray,
                fontSize: 14,
                maxRotation: 0,
                min: 0,
                minRotation: 0,
                padding: 10
            },
            gridLines: {
                color: 'transparent',
                lineWidth: 0,
                drawTicks: false,
                zeroLineColor: gray,
                zeroLineWidth: 2
            },
            scaleLabel: {
                display: true,
                labelString: xLabel,
                fontColor: gray,
                fontSize: 14
            }
        }],
        yAxes: [{
            display: true,
            id: this.yAxisId,
            position: 'left',
            ticks,
            gridLines: {
                color: transparentGray,
                lineWidth: 1,
                drawTicks: false,
                zeroLineColor: gray,
                zeroLineWidth: 2
            },
            scaleLabel: {
                display: true,
                labelString: yLabel,
                fontColor: gray,
                fontSize: 14
            }
        }]
    }
}

请问我的配置是否存在问题？为何本地正常但部署到Azure就出现异常？

你的配置本身没有明显语法错误，本地与Azure环境的差异主要由以下几种原因导致：

• 字体缺失：本地环境默认安装了ChartJS渲染依赖的字体（如Arial），但Azure服务器可能未预装该字体，Canvas渲染时会 fallback 到其他字体，引发字号、间距异常。
  解决方法：在部署包中嵌入所需字体文件，初始化chartjs-node-canvas时指定字体：

  const { CanvasRenderService } = require('chartjs-node-canvas');
  const canvasService = new CanvasRenderService(width, height, (Chart) => {
      Chart.defaults.global.defaultFontFamily = 'Arial';
      // 注册嵌入的字体文件
      const font = new FontFace('Arial', 'url(/path/to/your-font-file.ttf)');
      font.load().then(loadedFont => document.fonts.add(loadedFont));
  });
  

• 版本兼容性问题：你使用的chart.js@2.7.3和chartjs-node-canvas@3.2.0版本跨度较大，虽标注兼容，但不同环境下可能存在渲染逻辑差异。
  解决方法：将chart.js升级到2.x系列最新稳定版（如2.9.4），或降低chartjs-node-canvas版本至适配2.7.x的版本，缩小版本差距。

• DPI/渲染缩放差异：Azure服务器的Canvas默认DPI与本地不同，导致字体渲染放大。
  解决方法：初始化CanvasRenderService时显式设置DPI参数：

  const canvasService = new CanvasRenderService(width, height, undefined, { dpi: 96 });
  

内容的提问来源于stack exchange，提问作者Levente Makszimus