primefaces barChart costum x-axes

Question

我的应用程序中有p:barchart图,类似于showCase上的第二个条形图:http: //www.primefaces.org/showcase/ui/barChart.jsf

<p:barChart id="horizontal" value="#{chartBean.categoryModel}" legendPosition="se" style="height:300px"  
            title="Horizontal Bar Chart" orientation="horizontal" min="0" max="200"/>

如何在X轴上自定义数字.我想格式化x轴只使用整数.

提前致谢.

Answer 1

试试这个(未经测试):

<p:barChart extender="ext" id="horizontal" value="#{chartBean.categoryModel}" legendPosition="se" style="height:300px"  
    title="Horizontal Bar Chart" orientation="horizontal"/>

在你js添加这个

function ext() {
   this.cfg.seriesDefaults = { 
       useSeriesColor: true, 
       min: 0, 
       max: 200, 
       tickInterval: 20, 
       tickOptions: { 
           formatString: '%d' 
       } 
   };
}

或仅此x轴:

function ext() {
   this.cfg.axes = {
       xaxis:
       {
           tickInterval: 20,
           tickOptions: { 
               formatString: '%d' 
           } 
       }
   };
}

你可以尝试玩 tickInterval......

直接来自PrimeFaces用户指南

扩展

图表提供对常用jqplot选项的高级访问,但jqplot中有更多自定义选项可用.扩展器功能通过增强this.cfg对象提供对低级api的访问以进行高级自定义,这里是增加线系列阴影深度的示例;

<p:lineChart value="#{bean.model}" extender="ext" />


function ext() {
    //this = chart widget instance
    //this.cfg = options
    this.cfg.seriesDefaults = {
        shadowDepth: 5
    };
}

有关可用选项的文档,请参阅jqPlot文档; http://www.jqplot.com/docs/files/jqPlotOptions-txt.html 转换器