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

Question

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

它试过这个：

--- XHTML ---

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

--- Java ---

public String getDatatipFormat()
{
    return "<span style=\"display:none;\">%s</span><span>%s</span>";
}

isShowDatatip() returns 正确。

自定义的datatipFormat好像不行，而且我不知道怎么把我想要的数据放到%s上。

继续：

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

谢谢

Answer 1

你可以使用 <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 调用叠加层，也可以捕获图表的鼠标悬停事件。

Answer 2

我找到了解决方案。

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。

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

Primefaces 5.2 : customize charts datatip

jsf

primefaces

charts

jqplot

datatip