如何使用堆叠的材料条形图为条形图的每个部分赋予其自己的颜色

时间:2014-12-03 04:09:40

标签: google-visualization bar-chart

当我创建普通条形图时,Google会自动分配颜色并且看起来不错:

Non-stacked graph

然而,当我堆叠它们时,它们都是相同的音调并且变得难以阅读。

Stacked graph

如何让每个酒吧的每个部分都有不同的颜色?每页的条形数量都不同,因此不能选择硬编码颜色?

以下是图表的代码。

代码:

<!DOCTYPE html>
<html lang="en">
  <head>
          <script type="text/javascript" src="https://www.google.com/jsapi"></script>
            <script type="text/javascript">
      google.load("visualization", "1.1", {packages:["bar"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Type', 'Set 1','Set 2','Set 3','Set 4','Set 5','Set 6','Set 7', { role: 'annotation'} ],
                  ['W35 2014',  84,333,147,0,0,0,0, ''],
                  ['W36 2014',  69,47,120,254,23,0,0, ''],
                  ['W37 2014',  252,605,0,0,23,6,0, ''],
                  ['W38 2014',  191,710,363,271,72,10,0, ''],
                  ['W39 2014',  176,366,302,187,7,6,0, ''],
                  ['W40 2014',  372,270,444,556,68,8,9, ''],
                  ['W41 2014',  179,71,322,291,73,0,0, ''],
                  ['W42 2014',  357,66,180,20,39,0,116, ''],
                  ['W43 2014',  137,173,193,154,43,5,0, ''],
                  ['W44 2014',  75,108,109,20,20,27,0, ''],
                  ['W45 2014',  191,289,125,68,15,0,450, ''],
                  ['W46 2014',  147,224,0,0,1,27,387, ''],
                  ['W47 2014',  130,254,133,164,23,0,357, ''],
                  ['W48 2014',  271,122,35,40,9,0,150, ''],
                  ['W49 2014',  173,14,107,72,41,3,38, ''],
                ]);

        var options = {
          chart: {
            title: 'Breakdown of time spent',
            subtitle: 'Shown by week',
          },
          stacked: true,
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('chart'));

        chart.draw(data, options);
      }
    </script>
      </head>

  <body>

    <div id="chart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

0 个答案:

没有答案