Primefaces Chart坐标轴显示乱码求助（Chrome/Edge异常）

问题现象 #

开发的PrimeFaces折线图包含日期轴（X轴）和数量轴（Y轴），在Google Chrome（119.0.6045.124）、Edge（120.0.2210.91）浏览器中，两个坐标轴的标签均显示乱码，但Firefox（117.0.1 64位）显示正常。该问题在PrimeFaces V8官方示例页面多次刷新后也会出现。

效果对比 #

• Firefox正常显示：
  
• Chrome/Edge乱码显示：
  

代码片段 #

XHTML部分 #

<p:chart id="chrtAuswertung" type="line" model="#{auswertungenOrdnerBean.dateModel}" widgetVar="chrtAuswertung" style="height:400px; margin-bottom: 2em;" />

Bean部分 #

dateModel = new LineChartModel();
DateAxis axis = new DateAxis("Datum");
axis.setTickAngle(-50);
axis.setTickFormat("%d.%m.%y");
axis.setMin(localDateStart.toString());
axis.setMax(localDateEnde.toString());

dateModel.getAxes().put(AxisType.X, axis);

使用版本 #

• Google Chrome 119.0.6045.124
• Edge 120.0.2210.91
• Firefox 117.0.1（64位）
• PrimeFaces 6.1.1

解决方案 #

这个问题是PrimeFaces依赖的旧版Chart.js在Chromium内核浏览器中存在的字体渲染bug，尤其是坐标轴标签旋转后容易触发。可尝试以下几种解决方式：

1. 升级PrimeFaces版本
   PrimeFaces 6.1.1依赖的Chart.js版本较老，后续版本（如8.0+）已修复部分渲染问题。虽V8示例仍偶现，但新版本修复更全面，能大幅降低触发概率。项目允许的话优先升级到最新稳定版。

2. 调整坐标轴标签旋转角度
   暂时减小或去掉setTickAngle的角度值，比如从-50调整为-30或0，可避免触发Chromium的字体渲染异常。修改Bean代码：

axis.setTickAngle(-30); // 或直接注释掉该行

3. 强制设置坐标轴字体
   通过PrimeFaces的extender属性自定义Chart.js配置，强制指定坐标轴字体，规避浏览器默认字体的渲染问题：

• 页面添加自定义JS函数：

function customizeChart() {
    this.cfg.scales.xAxes[0].ticks.fontFamily = 'Arial, sans-serif';
    this.cfg.scales.yAxes[0].ticks.fontFamily = 'Arial, sans-serif';
    this.cfg.scales.xAxes[0].scaleLabel.fontFamily = 'Arial, sans-serif';
    this.cfg.scales.yAxes[0].scaleLabel.fontFamily = 'Arial, sans-serif';
}

• 修改<p:chart>标签添加extender属性：

<p:chart id="chrtAuswertung" type="line" model="#{auswertungenOrdnerBean.dateModel}" 
         widgetVar="chrtAuswertung" style="height:400px; margin-bottom: 2em;"
         extender="customizeChart" />

4. 临时禁用硬件加速
   在Chromium浏览器中禁用硬件加速（设置→系统→使用硬件加速模式）可临时解决，但这是客户端设置，无法强制所有用户操作，仅作为排查手段。

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