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

【问题标题】：How to display timestamped data with PrimeFaces and ChartJs?如何使用 PrimeFaces 和 ChartJs 显示带时间戳的数据？
【发布时间】：2019-05-09 12:54:07
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： primefaces chart.js

【解决方案1】：

好的，很好的问题。

首先，PF 知道他们还没有实施时间，但有一张未结的票：https://github.com/primefaces/primefaces/issues/4564

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

在您的图表的 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 看到不同的时间格式。

【讨论】：

谢谢，这看起来很有希望！但是，我无法让它工作 - 扩展器功能正在视图加载时执行，但未应用设置。没有刻度标签，没有颜色......并且 js 控制台上没有错误。我正在使用字符串作为数据点的标签，根据扩展器中作为“解析器”值给出的格式进行格式化，这是正确的方法吗？非常感谢您帮助我！
没关系，它现在正在工作。我没有复制选项对象，而是直接在扩展器中操作 this.cfg.config，只交换比例。也许您的解决方案正在发挥作用，因为您的项目有一些特定的东西？
是的，这就是我复制它并将其合并回来的原因！
好的，我明白了。您能否修改您的答案，以便将项目细节排除在外？那我就欣然接受了！无论如何，非常感谢您为我指明了正确的方向！
好吧，我想我已经剥离了足够多的内容，使它不具体！

【解决方案2】：

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

例如：

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

【讨论】：