自定义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图表

回答

相关问题