Javascript Google图表-无法获取要格式化的列图表

呃，这方面的文档似乎非常清晰，但我似乎无法正确更改图表中条形图的颜色。一定有一些明显的东西我遗漏了……以下是我目前正在处理的问题：

setOnLoadCallback（drawStuff）；
函数drawStuff（）{
var data=new google.visualization.arrayToDataTable([
[“公司”、“英亩”{角色：“风格”}]，
[“铜”，8.94，#b87333”]，
[“银”，10.49，“银”]，
[“黄金”，19.30，“黄金”]，
[“白金”，21.45，“颜色：#e5e4e2”]
]);
变量选项={
宽度：700，
身高：500，
图表：{
标题：“Haynesville/Bossier Play-样本面积估算”，
字幕：“2015年12月15日更新”
},
系列：{
0:{axis:'Acres'}，//将系列0绑定到名为“distance”的轴。
},
轴线：{
y:{
英亩：{label:'Acres'}，//左y轴。
}
}
};
var chart=new google.charts.Bar（document.getElementById（'dual_y_div'）；
图表绘制（数据、选项）；
};

这是如何更改图形颜色的

var options = {
            colors: ['#2980b9']
        };

在ur

options

变量中添加此

color

选项

就你而言

var options = {
      width: 700,
      colors: ['#2980b9'],
      .....
      .....

---

如果您的图表中有两个条形图，请使用以下颜色：['0d6957'，'1fb89a']您在问题中发布的代码只需进行一些简单的更改即可正常工作：

在此脚本标记中：

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

将

google.charts.Bar

更改为

google.visualization.ColumnChart

并更改此选项代码：

var options = {
  width: 700,
  chart: {
    title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
    subtitle: 'updated December 15, 2015'
  },
  series: {
    0: { axis: 'Acres' }, // Bind series 0 to an axis named 'Acres'.           
  },
  axes: {
    y: {
      Acres: {label: 'Acres'}, // Left y-axis.            
    }
  }
};

对此，请改为：

var options = {
  title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
  legend: {
    position: 'none'
  },
  hAxis: {
    title: 'Companies'
  },
  vAxis: {
    title: 'Acres'
  }
};

请注意，常规谷歌图表不支持字幕，这就是为什么我在上面发布的选项代码中遗漏了字幕

Google material charts确实支持字幕，但它们对图表中的每个数据系列应用颜色，而不是对系列中的每个值应用颜色。以下是使用物料图表的完整代码：

setOnLoadCallback（drawStuff）；
函数drawStuff（）{
var data=new google.visualization.arrayToDataTable([
[“公司”、“Acres1”、“Acres2”、“Acres3”、“Acres4”]，
[“康菲”，8.94、10.21、5.67、14.53]，
[“特斯拉”，10.49,16.32,20.15,13.49]，
[“德士古”，19.30,17.10,15.23,25.37]，
[“Yahoo.com”，21.45、22.32、18.19、27.43]
]);
变量选项={
图表：{
标题：“Haynesville/Bossier Play-样本面积估算”，
字幕：“2015年12月15日更新”
},
图例：{
位置：“无”
},
颜色：['#b87333'、'银'、'金'、'#e5e4e2']，
系列：{
0:{轴：'英亩'}，
1:{轴：'英亩'}，
2:{轴：'英亩'}，
3:{轴：'英亩'}
},
轴线：{
y:{
英亩：{label:'Acres'}，//左y轴。
}
}
};
var chart=new google.charts.Bar（document.getElementById（'dual_y_div'）；
图表绘制（数据、选项）；
};

---

我还没有找到一种方法来更改系列中每个值的材质图表上显示的颜色。因此，看起来您必须在省略副标题和让图表以您想要的方式显示颜色之间做出选择，或者使用材质图表包含副标题，但让系列中每个值的颜色相同。

感谢您的提示。因此，由于当前表中有四列，我的格式是否如下所示：颜色：['#2980b9'，'#0431B4；'#DF013A'，'#F7FE2E']，您可以添加jsfiddel吗？我将在其中修复谢谢您的帮助，先生！知道为什么我看不到图表的标题/副标题吗？修改了我的答案以使标题和轴标签正常工作

var options = {
  title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
  legend: {
    position: 'none'
  },
  hAxis: {
    title: 'Companies'
  },
  vAxis: {
    title: 'Acres'
  }
};

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

<div id="dual_y_div" style="width: 700px; height: 500px;"></div>

<script>
  google.setOnLoadCallback(drawStuff);
  function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
      ["Companies", "Acres1", "Acres2", "Acres3", "Acres4"],
      ["Conoco", 8.94, 10.21, 5.67, 14.53],
      ["Tesla", 10.49, 16.32, 20.15, 13.49],
      ["Texaco", 19.30, 17.10, 15.23, 25.37],
      ["Yahoo.com", 21.45, 22.32, 18.19, 27.43]
    ]);

    var options = {
      chart: {
        title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
        subtitle: 'updated December 15, 2015'
      },
      legend: {
        position: 'none'
      },
      colors: ['#b87333', 'silver', 'gold', '#e5e4e2'],
      series: {
        0: { axis: 'Acres' },
        1: { axis: 'Acres' },
        2: { axis: 'Acres' },
        3: { axis: 'Acres' }
      },
      axes: {
        y: {
          Acres: {label: 'Acres'}, // Left y-axis.            
        }
      }
    };

    var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
      chart.draw(data, options);
  };
</script>