Question

我有一个带多系列的Primefaces p：chart（BarChartModel），我正在尝试更改多系列条的默认颜色。

我的p：图表代码是：

<p:chart type="bar" model="#{performanceStaffController.genderChartModel}" 
            rendered="#{performanceStaffController.genderChartModel != null}"
            style="height:400px"
            styleClass="center-block">
    <h:outputScript>
        function chartExtender() {
            this.cfg.seriesDefaults.rendererOptions.varyBarColor = true;
        }
    </h:outputScript>
</p:chart>

设置SeriesColors的Bean代码是：

    genderChartModel.setSeriesColors("ff9933, 77933c");
    genderChartModel.setExtender("chartExtender");

虽然此代码完美适用于带有单个系列的条形图，但它不会产生多系列的所需结果。

附上当前显示方式的图片。

我需要的是每个A，B，C部分，橙色的男孩栏和绿色的女孩栏。

在Stackoverflow中遇到了与此主题相关的许多其他示例，但它们都有一个系列。请以简单的方式建议如何为多系列实现此目的。希望这不是重复。

添加更多详情：

了解有关如何使用

中的jqplot的更多信息

Customize primefaces chart

Vary Color Bar For Two Series Data in Jqplot

我的代码现在是：

<p:chart type="bar" model="#{performanceStaffController.genderChartModel}" 
            rendered="#{performanceStaffController.genderChartModel != null}"
            style="height:400px"
            styleClass="center-block">
    <h:outputScript>
        function chartExtender() {
            this.cfg.seriesDefaults.rendererOptions.varyBarColor = true;
            this.cfg.series = 
                            [
                            {seriesColors: ["#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33"]}, 
                            {seriesColors: ["#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c"]}
                            ]
        }
    </h:outputScript>
</p:chart>

和bean代码是

genderChartModel.setExtender("chartExtender");

现在问题不同了

标签名称和图例颜色混乱，尽管这些值是在bean中设置的，之前它工作正常。看起来像this.cfg.series会覆盖属于它的所有其他值。令人惊讶的是，根据图表栏不会自动拾取图例颜色 - 它至少可以拿到前两个!!看起来没有简单的解决方案来实现所需的东西!!

Answer 1

你应该设置每个图表系列的组值而不是使用＆＃34; chartseriescolors＆＃34;更改条形颜色的属性。如果只为组多个系列设置一个值，则颜色将相同。所以每个图表系列的组合值。我用这种方式解决了这个问题。

Answer 2

         ChartSeries A = new ChartSeries();
         ChartSeries B = new ChartSeries();
         A.setLabel("A");
         B.setLabel("B");

             A.set("1", 1);
             B.set("1", 2);

         model.addSeries(A);
         model.addSeries(B);

Answer 3

@Kukeltje，这是答案。

        genderChartModel.addSeries(boys);
        genderChartModel.addSeries(girls);

        genderChartModel.setSeriesColors("ff9933, 77933c");

        genderChartModel.setTitle("");
        genderChartModel.setLegendPosition("e");
        genderChartModel.setLegendPlacement(LegendPlacement.OUTSIDEGRID);

如何更改primefaces多系列条形图的颜色

3 个答案: