我正在使用谷歌的新Material Bar Charts来显示带有chart.title
和chart.subtitle
选项的图表,但无法更改颜色。我想要实现的是
http://jsfiddle.net/8pjuz38c/1/
但我得到的最接近的是:
http://jsfiddle.net/8pjuz38c/5/
为什么不应用于该系列的颜色?
答案 0 :(得分:4)
您正在将“材料条形图”与正常的“条形图”混淆。用于着色条的方法是用于正常条形图的方法。不是物质的。
比较下面的代码行。
正常条形图
<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'));
将colors属性添加到选项对象。
示例:强>
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);
}
答案 1 :(得分:2)
我有同样的问题,在这种情况下我认为是与isStacked
选项相关的错误,如果此选项设置为true
,则材料条形图将调色板作为渐变数组的第一个元素。
但是如果将该选项设置为false,则可以访问所有颜色数组。但数据不会堆叠。
colors: ['#b0120a', '#ffab91']
。