自定义PrimeFaces图表

Question

我在项目中使用了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图表中使用上述代码？

- or123456

Answer 1

使用扩展器时，您可以通过js更改一切。

这里是一个例子

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

在JS文件中或页面下方的<script>标签中：

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

这只是一个例子.. 这将帮助您完成其余部分。

如需更多最新的PF版本，请查看PrimeFaces 5.2及更高版本中图表扩展属性的替代方法是什么，希望这对您有所帮助 :)

- Aviad

---

如何使用以下代码与this.cfg： 轴：{ 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天”， drawMajorGridlines：false } - or123456

this.cfg.axes = { xaxis: { renderer: { tickRenderer: 'CanvaAxisTickRenderer', tickOptions: { formatString: "%b %e", angle: -30, textColor: '#dddddd' ... 等等。应该是一样的。但也许你需要先尝试更改简单的部分，然后再进行复杂的操作。因为这可能是犯错误的方式。 - Aviad

Answer 2

你是否已经升级到Primefaces 5.0？Primefaces实际上重新设计了其图表API，因此您现在可以直接从bean中添加这些自定义选项，而无需使用jplot。另外，旧版本的图表将来会被弃用，所以最好进行切换。

如果您仍然坚持使用旧版本的图表，则需要使用extender选项使您的图表扩展该功能。

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

- LegendzRider

---

如何使用以下代码与this.cfg：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 } - or123456

Answer 3

我没有费心去定制PrimeFaces图表。我选择在我的JSF应用程序中使用Google charts。它高度可定制，并且呈现为SVG，因此您还可以使用CSS来样式化您的图形。您可以查看GChart PrimeFaces扩展，或者只需加载JavaScript 自定义一切（这很容易并且有良好的文档记录）。

- Jasper de Vries