自定義primefaces圖表

我在我的項目中使用primefaces的圖表。自定義primefaces圖表

我知道是primefaces的圖表使用jqplot。

在jqplot的網站上存在自定義jqplot圖表的例子。

如何使用示例代碼來定製primefaces圖表？用於定製jqplot圖表

示例代碼以下：

$(document).ready(function() { 
$.jqplot._noToImageButton = true; 
var plot1 = $.jqplot("chart1", [prevYear, currYear], { 
    seriesColors: ["rgba(78, 135, 194, 0.7)", "rgb(211, 235, 59)"], 
    title: 'Monthly TurnKey Revenue', 
    highlighter: { 
     show: true, 
     sizeAdjust: 1, 
     tooltipOffset: 9 
    }, 
    grid: { 
     background: 'rgba(57,57,57,0.0)', 
     drawBorder: false, 
     shadow: false, 
     gridLineColor: '#666666', 
     gridLineWidth: 2 
    }, 
    legend: { 
     show: true, 
     placement: 'outside' 
    }, 
    seriesDefaults: { 
     rendererOptions: { 
      smooth: true, 
      animation: { 
       show: true 
      } 
     }, 
     showMarker: false 
    }, 
    series: [ 
     { 
      fill: true, 
      label: '2010' 
     }, 
     { 
      label: '2011' 
     } 
    ], 
    axesDefaults: { 
     rendererOptions: { 
      baselineWidth: 1.5, 
      baselineColor: '#444444', 
      drawBaseline: false 
     } 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.DateAxisRenderer, 
      tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
      tickOptions: { 
       formatString: "%b %e", 
       angle: -30, 
       textColor: '#dddddd' 
      }, 
      min: "2011-08-01", 
      max: "2011-09-30", 
      tickInterval: "7 days", 
      drawMajorGridlines: false 
     }, 
     yaxis: { 
      renderer: $.jqplot.LogAxisRenderer, 
      pad: 0, 
      rendererOptions: { 
       minorTicks: 1 
      }, 
      tickOptions: { 
       formatString: "$%'d", 
       showMark: false 
      } 
     } 
    } 
}); 

    $('.jqplot-highlighter-tooltip').addClass('ui-corner-all') 
});

例如鏈路1

如何在primefaces圖表使用上述代碼？

來源

2014-05-24 O.R

當您使用擴展，你可以改變一切由js。

下面是一個例子

<p:lineChart ... extender="chartExtender"/>

而且對js文件或在標籤頁：

function chartExtender() {   
// this = chart widget instance   
// this.cfg = options   
this.cfg.grid = {    
     background: 'transparent', 
     gridLineColor: '#303030', 
     drawBorder: false, 
    }; 
    }

這僅僅是一個例子。這將幫助你做休息。

希望可以幫到:)

來源

2014-05-24 20:41:44 Aviad

如何使用以下代碼this.cfg：軸：{x軸：{ 渲染：$ .jqplot.DateAxisRenderer， tickRenderer：$ .jqplot.CanvasAxisTickRenderer， tickOptions：{ formatString的：「％b％E」，角度：-30， textColor：'#dddddd' }， min：「2011-08-01」，最大：「2011-09-30」， tickInterval：「7天」， drawMajorGridlines：假 } –

this.cfg.axes = {x-軸：{渲染：{tickRenderer： 'CanvaAxisTickRenderer'，tickOptions：{formatString的：「％b％e」，角度：-30，textColor：'#dddddd'...等等。它應該是相同的。但是，也許你需要先嚐試改變簡單的部分，然後再複雜化。因爲這可能是犯錯誤的方法 – Aviad

您是否升級到Primefaces 5.0？ Primefaces實際上重複了它的圖表api，以便您現在可以直接從您的bean添加這些自定義，而無需處理jplot。此外，舊版本的圖表將在未來被棄用，因此切換是一個好主意。

如果你還是堅持處理舊版本的圖表，你所要做的就是讓你的圖表擴展功能是什麼，通過使用擴展選項

<p:lineChart ... extender="nameOfFunction"/>

來源

2014-05-24 17:35:42 LegendzRider

如何使用以下代碼與this.cfg的：軸：{x軸：{渲染：$ .jqplot.DateAxisRenderer，tickRenderer：$ .jqplot.CanvasAxisTickRenderer，tickOptions：{formatString的：「％B％E」，角度： -30，textColor：'#dddddd'}，分鐘：「2011-08-01」，最大值：「2011-09-30」，tickInterval：「7天」，drawMajorGridlines：false} –

我沒有打算自定義PrimeFaces圖表。我選擇在我的JSF應用程序中使用Google charts。它是高度可定製的，它呈現爲SVG，因此您還可以使用CSS來設計您的圖形。你可以看看GChart PrimeFaces extension或簡單地加載JavaScript的所有內容（這很容易和有據可查）。

來源

2016-09-06 09:58:35

自定義primefaces圖表

回答

相關問題