PrimeFaces 3.4图表数据提示格式

Question

今天我想尝试一下新的PrimeFaces 3.4.RC1版本。 对于图表来说，有一个新属性叫做datatipFormat。

我想要在折线图中仅显示值（y轴）作为datatip。 像这样：

<p:lineChart value="#{...}" datatipFormat="y-value"/>

我该如何仅显示这部分内容？我找不到一个使用模板字符串的例子。

最好的问候， Veote

- veote

Answer 1

Primefaces使用jqPlot图表库。在那里我找到了以下条目：

Highlighter.formatString

我尝试了（来自Primefaces Showcase的示例）：

   <p:lineChart  id="basic" value="#{userBean.categoryModel}" legendPosition="ne" 
   datatipFormat="#{userBean.datatipFormat}"  title="Basic Bar Chart" min="0"
    max="200" style="height:300px"/>

用户实体类

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

通过这个小技巧，只显示 y 轴。

- maciek

Answer 2

你可以使用所有PrimeFaces图表标签的extender属性来覆盖默认的绘图选项。例如：

<script type="text/javascript">
  function customExtender() {
    this.cfg.highlighter = {
      useAxesFormatters: false,
      tooltipAxes: 'y'
    }
  }
</script>
...
<p:lineChart extender="customExtender" value="..." />

其他可用的jqplot选项可以在此处找到：http://www.jqplot.com/docs/files/jqPlotOptions-txt.html，但请注意，该文档称其已过时。

- Rafał

Answer 3

BarChartModel()的提示：

public String getDatatipFormatX() {
    return "<font size=4 color=blue><span style=\"display:none;\">%s</span><span>%s</span></font>";
}

HorizontalBarChartModel()的提示：

public String getDatatipFormatY() {
    return "<font size=4 color=blue><span>%s</span><span style=\"display:none;\">%s</span></font>";
}

使用示例：

private void MyCharts(){

//get data (from database, for example) to be displayed

myBarChartModel = new BarChartModel();
myHorizontalBarChartModel = new HorizontalBarChartModel();

ChartSeries verticalSeries = new ChartSeries("verticalSeries");
ChartSeries horizontalSeries = new ChartSeries("horizontalSeries");

myBarChartModel.addSeries(verticalSeries);
myHorizontalBarChartModel.addSeries(horizontalSeries);

myBarChartModel.setDatatipFormat(getDatatipFormatX());
myHorizontalBarChartModel.setDatatipFormat(getDatatipFormatY());
//other chart settings...

}

然后，在JSF页面中：

<p:chart type="bar" model="#{chartBean.myBarChartModel}" />
<p:chart type="bar" model="#{chartBean.myHorizontalBarChartModel}" />

- jMarcel

Answer 4

datatipFormat使用sprintf格式化字符串用于工具提示，因此您可以仅打印第二个参数（y轴）：

<p:lineChart value="#{...}" datatipFormat="%2$d"/>

- mark0z

Answer 5

你可以仅显示 x 值的前 0 个字符（%.0s），这意味着隐藏它。在此之后，您可以按 sprintf 格式对 y 值进行任何操作。

yourBarChartModel.setDatatipFormat("%.0s%s");

- heiwil