Primefaces LineChart在谷歌Chrome浏览器中日期值显示异常求助

这个问题我之前也碰到过，本质是不同浏览器对日期字符串的解析规则差异导致的，给你梳理下原因和靠谱的解决办法：

问题回顾 #

你在用PrimeFaces 6.2（包括6.3快照版）的Line Chart组件展示按日期维度的数值数据时，发现Chrome 72里X轴日期显示完全不对，但IE11和Firefox能正常展示。后来移除tickInterval后还发现，Chrome会把欧式格式的日期（比如03.09.2019）错误解析成美式的09.03.2019，这就坐实了浏览器解析差异的问题。

原因分析 #

核心问题出在浏览器原生的Date.parse()方法上：

• IE和Firefox对.分隔的dd.MM.yyyy格式日期，会默认按欧式规则（日.月.年）解析；
• Chrome则会优先按美式规则尝试解析，把.当作分隔符时，会把前两位识别为月份，后两位识别为日期，直接导致日期错位。
  而PrimeFaces的Chart组件底层依赖的绘图库（jqPlot）在处理字符串类型的X轴日期数据时，会直接调用浏览器的这个原生方法，自然就出现了跨浏览器的不一致。

解决方法 #

最稳妥的方式是绕开字符串日期解析，改用时间戳（long型的毫秒数）作为X轴的数据值，让绘图库直接处理数值型的日期数据，彻底避免浏览器解析差异的问题。

代码修改对比 #

原代码（存在问题）：

SimpleDateFormat sdf = new SimpleDateFormat("dd.MM.yyyy");
// 用格式化后的字符串设置数据点
dataSeries.set(sdf.format(cal.getTime()), i);
// 用字符串设置X轴最大值
axis.setMax(sdf.format(new Date()));

修改后的代码（解决问题）：

// 直接用Date的时间戳（毫秒数）设置数据点
dataSeries.set(cal.getTime().getTime(), i);
// 同样用时间戳设置X轴最大值
axis.setMax((new Date()).getTime());

其他DateAxis的配置可以保留不变，确保tickFormat正确即可：

DateAxis axis = new DateAxis("Datum");
axis.setTickAngle(-50);
axis.setTickInterval("3 weeks");
axis.setTickFormat("%d.%m.%y");
lineChartModel.getAxes().put(AxisType.X, axis);

验证效果 #

修改后，Chrome、IE和Firefox都会基于时间戳正确解析并渲染日期，X轴的日期显示会完全一致，再也不会出现错位的情况。这种方式也避开了时区、区域设置带来的潜在影响，是跨浏览器兼容的最优解。

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