primefaces barChart costum x-axes [英] primefaces barChart costum x-axes

问题描述

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

I have p:barchart graph in my application similar to the second barchart on the 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轴只使用整数。

how can I customize the Numbers on my X-axis. I want to format the x-axis to use only Integers.

提前感谢。

推荐答案

试试这个（未经测试）：

<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的访问以进行
高级自定义，这里是一个增加线系列阴影深度
的示例;

Charts provide high level access to commonly used jqplot options however there are many more customization options available in jqplot. Extender feature provide access to low level apis to do advanced customization by enhancing this.cfg object, here is an example to increase shadow depth of the line series;

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

Refer to jqPlot docs for the documentation of available options; http://www.jqplot.com/docs/files/jqPlotOptions-txt.html Converter

这篇关于primefaces barChart costum x-axes的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！