首页 文章

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

提问于
浏览 次
2

我有一个Primefaces p：图表（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");

虽然此代码完美适用于单个系列的条形图，但它不会产生多系列的预期结果 .

附上当前显示方式的图片 .
p:chart with multi series

我需要的是A，B，C的每个部分，Orange的男生酒吧和Green的女生酒吧 .

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

Adding more details:

了解如何使用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");

现在问题不同了

enter image description here

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

primefaces charts jqplot

3 回答

  • 1

    您应该为每个图表系列设置组的值，而不是使用“chartseriescolors”属性来更改条形图的颜色 . 如果只为组多个系列设置一个值，则颜色将相同 . 所以每个图表系列的组合值 . 我这样解决了这个问题 .

    回复于
  • 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);
    回复于
  • 1

    @Kukeltje，这是答案 .

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

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

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

相关问题