primefaces - 如何使用 PrimeFaces 和 ChartJs 显示带时间戳的数据？

Question

由于 PrimeFaces 的公开 7.0 版本包含 ChartJs，我想我应该尝试一下。

它工作正常，但到目前为止我还无法在折线图中正确显示值随时间变化的数据。

chart.js 为此目的提供了笛卡尔时间轴，但是在 PrimeFaces 中，只有 CartesianLinearAxes 可用。

将日期对象(而不是字符串标签)提供给 ChartData 只会导致不绘制 x 轴。

我是否遗漏了某些内容，或者他们在将 Chart.js 包含在 Primefaces 中时只是跳过了此功能？

Answer 1

好的，好问题。

首先，PF 知道他们还没有实现时间，但有一个开放的票证:https://github.com/primefaces/primefaces/issues/4564

其次，不用担心，您可以使用扩展器功能来使其发挥作用。这是我们使用的一个示例。

1. 在图表的 Java 模型中，启用扩展器功能。

chartModel.setExtender("chartExtender");

在您的 XHTML 中添加此 JavaScript 代码函数以匹配您在 #1 Java bean 中设置时的情况。

function chartExtender() {
   //copy the config options into a variable
   var options = $.extend(true, {}, this.cfg.config);

   options = {
      //remove the legend
      legend: {
         display: false
      },
      scales: {
         xAxes: [{
            display: true,
            type: "time",
            time: {
               parser: 'h:mm:ss a',
               tooltipFormat: 'h:mm:ss a',
               unit: 'hour',
               displayFormats: {
                  'hour': 'h:mm:ss a'
               }
            }
         }],
         yAxes: [{
            display: true,
            scaleLabel: {
               display: true,
               labelString: 'Your Y Axis',
               fontSize: 13,
            }
         }]
      }
   };

   //merge all options into the main chart options
   $.extend(true, this.cfg.config, options);
};

您可以从 ChartsJS using MomentJS 中查看可用的不同时间格式。