java primefaces barChart costum x 轴

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13544626/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-31 13:10:07  来源:igfitidea点击:

primefaces barChart costum x-axes

javaxhtmlprimefacesinteger

提问by slowessam

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 图,类似于 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"/>

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

如何自定义 X 轴上的数字。我想格式化 x 轴以仅使用整数。

thanks in advance.

提前致谢。

回答by Daniel

Try this (not tested):

试试这个(未测试)

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

In you js add this

在你的js中添加这个

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

or this x axis only :

或仅此 x 轴:

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

You can try playing with tickInterval...

你可以试试玩 tickInterval...



Straight from the PrimeFaces Userguide

直接来自PrimeFaces 用户指南

Extender

扩展器

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;

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

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


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

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

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

回答by Daniel

your extender function could be like this

你的扩展功能可能是这样的

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

I had the same problem and this works great, I based on Daniel's Answer and some other code. This way it just format the desired axis, not both.

我遇到了同样的问题,这很好用,我基于 Daniel's Answer 和其他一些代码。这样它只是格式化所需的轴,而不是两者。

回答by fylex

In you js add this

在你的js中添加这个

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

回答by CheshellCat

You can set format to axis from your @ManagedBean class using the following code:

您可以使用以下代码将格式设置为 @ManagedBean 类中的轴:

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