Primefaces: Charts and Legend position

问题:

I'm working on putting together a pretty basic stacked bar chart using Primefaces. The chart itself seems to build just fine. However, the legend is being placed over the chart data. I know you can move the legend to any compass ordinal (n, s, w, e, se, sw, ne, nw), but I'd actually like to move it OFF the data.

The code to get it in:

 <p:barChart id="stackedKWH" value="#{kwhSalesBeanManager.kwhSalesChart}" legendPosition="e" style="height:300px;width:800px" title="kWh Sales by Type" stacked="true" barMargin="10" min="0" max="125000000" />

And what it currently looks like. Would like to move that legend off the chart to the right.

回答1:

Try to add this :

function extLegend() 
{
    this.cfg.legend= {
        show: true,
        location: 's',
        placement: 'outsideGrid'
    };
}

and add this inside your barChart component :

 extender="extLegend"

回答2:

Now the best solution would be defining the placemant on chart model:

...
 modelChart.setLegendPlacement(LegendPlacement.OUTSIDE);
...

回答3:

Looks like you should use javascript for this purpose. something like that:

var legend = $('table.jqplot-table-legend')[0];
legend.setAttribute('style', 'position: absolute; z-index: 3; right: -100px; top: 25px;');

I tested it on this page: http://www.primefaces.org/showcase/ui/barChart.jsf