Charts 谷歌图表不同颜色和单系列材质条形图

使用{role:'style'}我可以对单个系列条形图应用不同的颜色。但是如果我使用新的谷歌“材料”条形图，我就不能

“常规”谷歌图表（作品）：

google.load（“可视化”，“1.1”，“包：['corechart']}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Element'，'Density'，{role:'style'}]，
[“铜”，8.94，“颜色：#FF9900']，
[“银色”，10.49，“颜色：#109618']，
[Gold'，19.30，'color:#3B3EAC']，
['Platinum'，21.45，'color:#0099C6']
]);       
var view=newgoogle.visualization.DataView（数据）；
变量选项={
标题：“贵金属密度，单位为g/cm^3”，
宽度：600，
身高：400，
条：{groupWidth:'85%}，
图例：{位置：'无'}，
};
var chart=new google.visualization.ColumnChart（document.getElementById（'barchart_values'）；
图表绘制（视图、选项）；
}

相同的图表，但使用谷歌“材质”条形图（不应用不同的颜色）

google.load（“可视化”、“1.1”、{packages:[“bar”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Element'，'Density'，{role:'style'}]，
[“铜”，8.94，“颜色：#FF9900']，
[“银色”，10.49，“颜色：#109618']，
[Gold'，19.30，'color:#3B3EAC']，
['Platinum'，21.45，'color:#0099C6']
]);   
var view=newgoogle.visualization.DataView（数据）；
变量选项={
标题：“贵金属密度，单位为g/cm^3”，
宽度：600，
身高：400，
条：{groupWidth:'95%}，
图例：{位置：'无'}，
};
options=google.charts.Bar.convertOptions（选项）；
var chart=new google.charts.Bar（document.getElementById（'barchart_values'）；
图表绘制（视图、选项）；
}

这似乎真的不可能。对于使用单个颜色的材质图表，任何地方都没有clou，如果您以旧的方式设置颜色数组，如

颜色：[……]

材质图表只需采用第一种颜色，并将其添加到所有条形图中。我相信这在材料图表中根本没有实现（还没有？）

但如果你真的想给这些条上色，你可以通过代码来实现：

函数着色（）{
变量颜色=['#FF9900'、'#109618'、'#3B3EAC'、'#0099C6']，
svg=document.getElementById（'barchart_values'）。querySelector（'svg'），
bar=svg.querySelectorAll（'path'）；
对于（var i=0；i这一个帮助了我

 var tmpColors = new Array(['orange'],['purple'],['red'],['green']);
    loop{
    .....
    .....
    options.colors = tmpColors[i];
    ....
    ....
    }

这是一个问题还是一个bug报告？对于bug报告，请参考“不错的解决方案”。我想进一步说，我会将颜色或不透明度（？）的较浅版本应用于select上的非选定条。只是说在2016年1月，材质图表仍然不支持该类型的着色（在同一系列中）@davidkonrad的技巧很棒，但有时会失败：在FF和Chrome上，如果我将鼠标悬停在其中一个条上，突然将鼠标拖出图表区域，默认的蓝色会显示出来。因此，我回到经典图表，并使用“主题：材质”技巧。