Question

我想在Primefaces 5.2图表中自定义数据提示。所以这意味着，我想要更改datatipFormat及其上的内容。

尝试了这个：

--- XHTML ---

Observable.prototype.combineLatest = require('rxjs/add/operator/combineLatest');

--- Java ---

<p:chart type="line" 
         model="#{lineChartController.lineModel}"
         title="#{lineChartController.lineModel.title}"
         showDatatip="#{lineChartController.lineModel.showDatatip}"
         datatipFormat="#{lineChartController.datatipFormat}"
         ... />

isShowDatatip（）返回true。

自定义datatipFormat似乎不起作用，而且我不知道如何将我想要的数据放在％s上。

要恢复：

我有Simple Primefaces 5.2 chart datatip
我想要Customized chart datatip from D3.js

由于

Answer 1

我找到了解决方案。

Here，它导致我走向错误的方向。

我把我的Java代码放在LineChartController上，而我的showDatatip导致了一个LineChartModel ...它包含一个setDatatipFormat（String）方法。

所以我用它：

LineChartModel lineModel = new LineChartModel();
...
lineModel.setDatatipFormat("<table><thead><tr><th>Date</th></tr></thead><tbody><td>%s</td><td>%s EUR</td></tbody></table>");

我仍然不知道如何将我想要的数据放入％s。

Answer 2

您可以将<p:overlayPanel>用于此

    <p:overlayPanel id="myPanel" for="myLbl" showEvent="mouseover" hideEvent="mouseout">
           <p:panelGrid columns="2">  
                <f:facet name="header">#{controller. getDate()}</f:facet>                   
                 <h:outputLabel value="#{controller.dataItem.Col1}" />             
                 <h:outputLabel value="#{controller.dataItem.Col2}" />    

           </p:panelGrid>  
  </p:overlayPanel>

并将此叠加层绑定在图表中所需点的鼠标悬停上，另外您可以从javascript调用叠加层，同时捕捉图表的鼠标悬停事件。

Primefaces 5.2：自定义图表数据提示

2 个答案: