Как изменить цвет штриховой диаграммы многострочных диаграмм

Question

У меня есть диаграмма Primefaces p: chart (BarChartModel) с несколькими сериями, и я пытаюсь изменить цвета по умолчанию для панели Multi Series.

Мой р: диаграмма код:

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

Bean код, который устанавливает SeriesColors является:

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> 

и код боб

genderChartModel.setExtender("chartExtender"); 

Теперь проблема отличается

имя метки и легенды цвета перепутались, если эти значения устанавливаются в бобе и работает нормально до. Похоже, this.cfg.series перезаписывает все остальные значения, которые являются его частью. Удивительно, что цвет легенд не подбирается автоматически по барам диаграммы - он мог бы по крайней мере забрать первые два! Похоже, нет простого решения для достижения необходимого!

Answer 1

вы должны установить значение группы для каждого графика, чем использовать атрибут "chartseriescolors" для изменения цвета баров. если вы установите только одно значение для группового многосерийного цвета, будет одинаковым. поэтому задайте значение группы для каждого чартера. Я решил эту проблему таким образом.

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);