在谷歌材料条形图上更改颜色

Question

我正在使用 google 的新 Material Bar Charts 显示带有 chart.title 和 chart.subtitle 选项的图表，但无法更改颜色。我想要达到的是

http://jsfiddle.net/8pjuz38c/1/

但我得到的最接近的是：

http://jsfiddle.net/8pjuz38c/5/

为什么不将颜色应用于系列？

Answer 1

材料条形图与条形图

您将“材料条形图”与普通“条形图”混淆了。您用于着色条的方法是用于普通条形图的方法。不是物质的。

区别

比较下面的代码行。

普通条形图

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>

和

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

材质条形图

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>

和

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

上一个答案（与每项带有多条条的材料条形图有关）

将颜色属性添加到选项对象。

示例：

var options = {
        title: 'Population of Largest U.S. Cities',
        colors: ['#b0120a', '#ffab91']
      };

所以如上图de jsFiddel中的代码应该是：

它在 je jsFiddle 中为我工作。确保你的代码是这样的：

google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawBarColors);

function drawBarColors() {
      var data = google.visualization.arrayToDataTable([
        ['City', '2010 Population', '2000 Population'],
        ['New York City, NY', 8175000, 8008000],
        ['Los Angeles, CA', 3792000, 3694000],
        ['Chicago, IL', 2695000, 2896000],
        ['Houston, TX', 2099000, 1953000],
        ['Philadelphia, PA', 1526000, 1517000]
      ]);

      console.log(google.visualization.arrayToDataTable);

      var options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        colors: ['#b0120a', '#ffab91'],
        hAxis: {
          title: 'Total Population',
          minValue: 0
        },
        vAxis: {
          title: 'City'
        }
      };
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Answer 2

我有同样的问题，在这种情况下，我认为是与isStacked选项相关的错误，如果此选项设置为true，材质条形图会将调色板作为第一个元素的渐变数组。

但是，如果您将该选项设置为 false，您将可以访问所有颜色数组。但数据不会堆积。 colors: ['#b0120a', '#ffab91']。