从 p:chart 条形图中删除网格和边框答案

【问题标题】：Remove grid and border from p:chart barchart从 p:chart 条形图中删除网格和边框
【发布时间】：2016-11-13 07:57:25
【问题描述】：

我正在尝试删除我的 primefaces 条形图中的网格和边框。请考虑新的primefaces图表。我用谷歌搜索了很多，只找到了 primefaces 旧标签的解决方案，但有新标签。

<p:chart type="bar" model="#{reportServerController.horizontalBarModelG}" styleClass="chartSize" >
            <p:ajax event="itemSelect" listener="#{auftragBean.itemSelectGutachten}" update="dataTableG" />
        </p:chart>

那么是否有可能从图表中删除边框和网格？

【问题讨论】：

标签： css jsf jsf-2 primefaces charts

【解决方案1】：

要扩展 jqplot 配置，您必须使用 primefaces 图表的扩展器功能。

在您的控制器中，您必须为您的模型设置属性扩展器。例如使用 primefaces 展示演示：

private BarChartModel initBarModel() {
    BarChartModel model = new BarChartModel();
    model.setExtender("chartExtender");

    ChartSeries boys = new ChartSeries();
    boys.setLabel("Boys");
    boys.set("2004", 120);
    boys.set("2005", 100);
    boys.set("2006", 44);
    boys.set("2007", 150);
    boys.set("2008", 25);

    ChartSeries girls = new ChartSeries();
    girls.setLabel("Girls");
    girls.set("2004", 52);
    girls.set("2005", 60);
    girls.set("2006", 110);
    girls.set("2007", 135);
    girls.set("2008", 120);

    model.addSeries(boys);
    model.addSeries(girls);

    return model;
}

setExtender 方法接受一个 javascript 函数的名称，您可以在其中操作 jqplot 配置。

例如，要删除网格线，您可以执行以下操作：

<h:outputScript>
    function chartExtender(){
        //this = chart widget instance
        //this.cfg = options
        this.cfg.axes.xaxis.tickOptions.showGridline = false;
        this.cfg.axes.yaxis.tickOptions.showGridline = false;
    }
</h:outputScript>

所有 jqplot 选项都可以看到 here

【讨论】：

【解决方案2】：

我认为您必须覆盖 Primefaces 图表的样式类：

How do I override default PrimeFaces CSS with custom styles?

我希望这会有所帮助！

【讨论】：