Question

由于PrimeFaces的7.0公开版本包括ChartJs，所以我想尝试一下。

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

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

将日期对象（而不是字符串标签）馈送到ChartData只会导致没有绘制x轴。

我是否缺少某些东西，或者在Primefaces中包含chart.js时，他们只是跳过了此功能？

Answer 1

好的问题。

首先，PF知道他们尚未实施时间，但有一张公开票证：https://github.com/primefaces/primefaces/issues/4564

第二，不用担心，您可以使用扩展器功能使其正常工作。这是我们使用的示例。

在图表的Java模型中，将Extender功能设置为打开。

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中可用的不同时间格式。

Answer 2

只是扩展程序的补充，请使用 this.cfg.config.options = {...

例如：

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

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

2 个答案: