如何更改 PrimeFaces 中的条形图图例位置？

Question

我正在使用 PrimeFaces 条形图在 JSF 中开发 Web 应用程序。我想更改图例位置。我验证了 Primefaces: Charts and Legend position 因为 post 他们使用，

<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"/>

但是在primeface 5.1中没有<p:barchart/>

<p:chart type="bar" model="#{chartView.barModel}" style="height:300px"/>

我的输出是这样的，

预期输出：

我怎样才能做到这一点？有人建议我正确的方法吗？

Answer 1

您仍然可以使用 model.setLegendPosition("w");在你的豆子里。如果你想要更具体的控制，你可以修改图例 table 的 css。 class 称为 table.jqplot-table-图例。

像这样：

XHTML:

   <p:chart styleClass="barChartStyleClass" type="bar" widgetVar="barChart" model="#{playgroundController.barModel}" style="width:400px;height:300px">

    </p:chart>

CSS:

.barChartStyleClass table.jqplot-table-legend {
    top:50px !important;
    right:50px !important;
    //more css here
}

也许你可以在没有 !important 的情况下让它工作，但我没有运气。但我仍然希望它能有所帮助:)

Answer 2

你可以在豆子上做：

BarChartModel model = new BarChartModel();
model.setLegendPosition("e");
model.setLegendPlacement(LegendPlacement.OUTSIDEGRID);

如何更改 PrimeFaces 中的条形图图例位置？

How to change Bar Charts Legend position in PrimeFaces?

charts

jsf

primefaces