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

Question

由于 PrimeFaces 的 public 7.0 版本包含 ChartJs，我想我会试一试。

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

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

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

在 Primefaces 中包含 chart.js 时，我是不是遗漏了什么或者他们只是跳过了这个功能？

Answer 1

好的问题。

首先，PF 知道他们还没有实施时间，但是有一个开放的工单：https://github.com/primefaces/primefaces/issues/4564

其次，不用担心，您可以使用 Extender 功能使其发挥作用。这是我们使用的示例。

在图表的 Java 模型中，打开扩展器功能。

chartModel.setExtender("chartExtender");

在您的 XHTML 中添加此 Java脚本代码函数以在您在 #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 查看可用的不同时间格式。

Answer 2

只是做扩展工作的补充，使用 this.cfg.config.options = {...

例如：

function extName() {
    this.cfg.config.options = {
        legend: {
           display: false
        }                    
    };
};

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

How to display timestamped data with PrimeFaces and ChartJs?

primefaces

chart.js