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轉換器

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：

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