How to change section color of a stacked bar chart in Google Charts API?

LazerSharks

The docs describe how to change the color of an entire bar by specifying a style data role column.

  var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

Then, each record/item of the datatable can specify a color to represent itself.

But what if I am creating a stacked bar chart? Each record/item has multiple values for its different sections. How do I choose the colorings of each section (coloring based on columns/attributes), instead of choosing a color for each item record?

LazerSharks

You can fiddle around with the colors configuration option:

columnChart.options = {
    ....
    colors: ['steelblue','orange','red']
     ...

}

The colors key is associated with an array where each string element specifies a color to be used to color the sections of a bar (the column attributes). Change the order around to achieve the desired section coloring.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Stacked Bar Chart Labels - D3

분류에서Dev

Stacked Bar Chart D3js

분류에서Dev

Google Charts remove white border around vAxis textPosition 'in' text on Bar Chart

분류에서Dev

vAxis : {slantedText : true}는 Bar Chart [Google Charts]에서 가능합니까?

분류에서Dev

Google Column Chart change color for each column with json

분류에서Dev

Google Column Chart change color for each column with json

분류에서Dev

Google Charts API CalendarChart

분류에서Dev

Label stacked bar chart with variable other than plotted Y

분류에서Dev

stacked bar and line chart in same graph with any android library?

분류에서Dev

How to change web browser's tab bar background color or image?

분류에서Dev

Google Charts - How to stretch x axis over chart's full width

분류에서Dev

How to add gradient color fill to the points of scatter plot using google Charts?

분류에서Dev

How to add {text} (without quotes) to an array in PHP for Google Chart API?

분류에서Dev

XPages - change background color of place bar button

분류에서Dev

<meter> Color Change on Animation Health Bar

분류에서Dev

Remove blank space above and below Google Charts horizontal column chart

분류에서Dev

How can I draw an additional horizontal grid line with a specific value in Google Bar chart (Not average value)

분류에서Dev

Flutter: How to change the status bar text color on Android and iOS when not using AppBar

분류에서Dev

How to remove Pie Charts from Google Maps API V3 on this example?

분류에서Dev

How do I display multiple stacked columns for each date range in an stacked Bar

분류에서Dev

How to change button color

분류에서Dev

Why does stacked bar plot change when add facet in r ggplot2

분류에서Dev

How to create a bar chart/histogram with bar per discrete value?

분류에서Dev

How to store and change coordinates individually - Google Maps API

분류에서Dev

Highcharts - Detail chart with stacked columns

분류에서Dev

Cannot change text and background color of searchbar in navigation bar

분류에서Dev

Change Google Map marker color with external jQuery

분류에서Dev

How to change the color of *just* the header?

분류에서Dev

How to change color of image in JavaFX

Related 관련 기사

  1. 1

    Stacked Bar Chart Labels - D3

  2. 2

    Stacked Bar Chart D3js

  3. 3

    Google Charts remove white border around vAxis textPosition 'in' text on Bar Chart

  4. 4

    vAxis : {slantedText : true}는 Bar Chart [Google Charts]에서 가능합니까?

  5. 5

    Google Column Chart change color for each column with json

  6. 6

    Google Column Chart change color for each column with json

  7. 7

    Google Charts API CalendarChart

  8. 8

    Label stacked bar chart with variable other than plotted Y

  9. 9

    stacked bar and line chart in same graph with any android library?

  10. 10

    How to change web browser's tab bar background color or image?

  11. 11

    Google Charts - How to stretch x axis over chart's full width

  12. 12

    How to add gradient color fill to the points of scatter plot using google Charts?

  13. 13

    How to add {text} (without quotes) to an array in PHP for Google Chart API?

  14. 14

    XPages - change background color of place bar button

  15. 15

    <meter> Color Change on Animation Health Bar

  16. 16

    Remove blank space above and below Google Charts horizontal column chart

  17. 17

    How can I draw an additional horizontal grid line with a specific value in Google Bar chart (Not average value)

  18. 18

    Flutter: How to change the status bar text color on Android and iOS when not using AppBar

  19. 19

    How to remove Pie Charts from Google Maps API V3 on this example?

  20. 20

    How do I display multiple stacked columns for each date range in an stacked Bar

  21. 21

    How to change button color

  22. 22

    Why does stacked bar plot change when add facet in r ggplot2

  23. 23

    How to create a bar chart/histogram with bar per discrete value?

  24. 24

    How to store and change coordinates individually - Google Maps API

  25. 25

    Highcharts - Detail chart with stacked columns

  26. 26

    Cannot change text and background color of searchbar in navigation bar

  27. 27

    Change Google Map marker color with external jQuery

  28. 28

    How to change the color of *just* the header?

  29. 29

    How to change color of image in JavaFX

뜨겁다태그

보관