primefaces BARCHART costum的x轴(primefaces barChart

我有号码：我的应用程序条形图图形类似于在陈列柜里的第二条形图： 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 Userguide

扩展

图表提供了常用的jqplot但是选项中有jqplot提供更多的自定义选项的高级别访问。 扩展功能提供访问低级API通过增强this.cfg对象做高级定制，这里是增加线路一系列的阴影深度的例子。

<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转换器

Answer 2:

您的扩展功能也能像这

    function customExtender() {
        this.cfg.axes.xaxis.tickOptions = {
            formatString : '%d'
        };
        this.cfg.axes.xaxis.tickInterval = 1;
    }

我有同样的问题，这个伟大的工程，我根据丹尼尔的回答和其他一些代码。 这样，它只是格式化所需的轴，而不是两个。

Answer 3:

在你的js添加此

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

Answer 4:

您可以从@ManagedBean类使用下面的代码设置格式轴：

Axis xAxis = categoryModel.getAxis(AxisType.X);
xAxis.setTickFormat("%.0f");

文章来源: primefaces barChart costum x-axes