Charts 更改google材质条形图上的颜色

我正在使用google的新功能来显示一个带有

图表.title

和

图表.subtitle

选项的图形，但无法更改颜色。我想要实现的是

但最接近我的是：

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

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

区别 比较下面的代码行

标准条形图

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

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

物料条形图

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

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

上一个答案（与物料条形图有关，每个项目有多个条形图） 将“颜色”属性添加到选项对象

示例：

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

因此，如上所示的de jsFiddel中的代码应该是：

它在我中间起作用。确保您的代码如下所示：

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

---

我也有同样的问题，在这种情况下，我认为是与

isStacked

选项相关的错误，如果该选项设置为

true

，则材质条形图将调色板作为数组第一个元素的渐变

但是，如果您将该选项设置为false，则可以访问所有颜色数组。但数据不会被叠加。

---

颜色：['#b0120a'，'#ffab91']

可能是一个bug，或者他们还没有将其用于材料图表，也许@asgallant有一些见解试图解决同样的问题——你运气好吗？不，到目前为止没有运气，如果你遇到解决方案，请告诉我。页面提到他们的材料设计条形图用于“在其属性中支持共同的外观和感觉”，因此我认为他们正在强制选择调色板颜色。我根本不明白您想做什么。如果jsfiddle#1起作用，为什么需要jsfiddle#5？如果您只想选择颜色，请参阅我在jsfiddle#47添加的更新：var options={colors:[''00ff0a'，'44abff']，为我工作。这是这个问题的答案，正如我之前提到的，这是一个bug，我的代码自己修复了它。这是这个问题的答案