谷歌图表-更改条形图的颜色
Google Charts - Change the color of bars
我想更改条形图中每个条形的颜色。目前,我尝试按照文档中的指定设置颜色选项:
var options = {
'title' : results.title,
'width' : 400,
'height' : 300,
'is3D' : true,
'colors' : ["#194D86","#699A36", "#000000"],
'allowHtml' : true
}
但它不起作用。基本上,我希望下图中的每个条形图都是相同的颜色:http://jsfiddle.net/etiennenoel/ZThMp/12/
有没有办法做到这一点,或者我必须改变我的代码结构才能做到?
[编辑-下面的编辑中列出了更好的方法]
可视化API按系列(或数据表中的列,如果您愿意)对数据进行着色。解决方案是使用DataView:将数据拆分为多个系列
// get a list of all the labels in column 0
var group = google.visualization.data.group(data, [0], []);
// build the columns for the view
var columns = [0];
for (var i = 0; i < group.getNumberOfRows(); i++) {
var label = group.getValue(i, 0);
// set the columns to use in the chart's view
// calculated columns put data belonging to each label in the proper column
columns.push({
type: 'number',
label: label,
calc: (function (name) {
return function (dt, row) {
return (dt.getValue(row, 0) == name) ? dt.getValue(row, 1) : null;
}
})(label)
});
}
// create the DataView
var view = new google.visualization.DataView(data);
view.setColumns(columns);
将图表中的"isStacked"选项设置为"true"以解决由此产生的列间距问题,并使用视图而不是DataTable:绘制图表
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(view, {
// options
isStacked: true
});
请参阅此处的示例。
[编辑:可用于更新可视化API的新(改进)方法]
现在,您可以使用新的"样式"列角色来指定列的样式。它是这样工作的:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'style'});
data.addRows([
['Foo', 5, 'color: #ac6598'],
['Bar', 7, 'color: #3fb0e9'],
['Baz', 3, 'color: #42c698']
]);
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
legend: {
position: 'none'
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
请参阅此处的示例:http://jsfiddle.net/asgallant/gbzLB/
您的问题有一个解决方案。您需要在选项中添加series
。我已经回答了类似的问题。请参阅我的答案。我希望这对你有帮助。
相关文章:
- Chart.js条形图:网格颜色和隐藏标签
- 如何使用chartjs设置条形图中每个条形图的颜色
- 使用颜色数组为不同的条形图设置不同的颜色
- 使用谷歌图表在条形图中设置颜色
- 使用highcharts为条形图中的每个条形设置单独的颜色
- 如何使用angularJS在剑道UI中点击堆叠条形图获得特定堆叠的颜色
- 融合图表 - 在柱形图2D图表中单击时更改条形的颜色
- 高图,条形图,在悬停时更改条形颜色
- NVD3.js 多条形图工具提示颜色
- 图表.js条形图颜色根据值而变化
- 条形图 d3.js 的颜色出现问题
- vis.js 3D 条形图:根据 z 坐标值设置条形颜色
- 根据值更改条形图中的条形图颜色
- 如何更改条形图颜色(谷歌图表可视化)
- 根据值改变chart.js中的条形图颜色
- js堆叠条形图颜色
- ionic change progressjavascript中的条形图颜色
- vejs动态条形图颜色
- 可以'在React js中工作的chart js中无法获得条形图颜色
- 谷歌图表单个条形图颜色