设置列的颜色在谷歌图表
Set column color in google chart
我正在使用谷歌图表建立一个折线图。我使用类别过滤器来切换显示的列,如下面的小提琴所示。
http://jsfiddle.net/asgallant/WaUu2/如何为每个列设置颜色,使它们始终具有该颜色?例如,如果您在小提琴示例中删除列Foo,列Bar将获得其颜色。
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Foo');
data.addColumn('number', 'Bar');
data.addColumn('number', 'Baz');
data.addColumn('number', 'Cad');
data.addRows([
['2005', 45, 60, 89, 100],
['2006', 155, 50, 79, 24],
['2007', 35, 31, 140, 53],
['2008', 105, 23, 43, 82],
['2009', 120, 56, 21, 67],
['2010', 65, 19, 34, 134],
['2011', 80, 23, 130, 40],
['2012', 70, 140, 83, 90]
]);
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
// you can comment out this next line if you want to have a default selection other than the whole list
initState.selectedValues.push(data.getColumnLabel(i));
}
// you can set individual columns to be the default columns (instead of populating via the loop above) like this:
// initState.selectedValues.push(data.getColumnLabel(4));
var chart = new google.visualization.ChartWrapper({
chartType: 'BarChart',
containerId: 'chart_div',
dataTable: data,
options: {
title: 'Foobar',
width: 600,
height: 400
}
});
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: 'Columns',
allowTyping: false,
allowMultiple: true,
allowNone: false,
selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
function setChartView () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
chart.setView(view);
chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartView);
setChartView();
columnFilter.draw();
}
试试这个:
var colors=["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#66aa00","#b82e2e","#316395","#994499","#22aa99","#aaaa11","#6633cc","#e67300","#8b0707","#651067","#329262","#5574a6","#3b3eac","#b77322","#16d620","#b91383","#f4359e","#9c5935","#a9c413","#2a778d","#668d1c","#bea413","#0c5922","#743411"];
//the code
view.columns.sort(function (a, b) {
return (a - b);
});
chart.getOptions().series=[];
for(var i=1;i<view.columns.length;i++){
chart.getOptions().series.push({color:colors[view.columns[i]-1]});
}
//the code
小提琴:http://jsfiddle.net/juvian/WaUu2/236/
相关文章:
- 使用谷歌图表在条形图中设置颜色
- 柱形图中每列的 ng-谷歌图表自定义颜色
- 在谷歌地图上的交叉路口2,3..圆圈中填充不同的颜色
- 如何在谷歌地图api中动态更改圆圈颜色
- 更改谷歌图表(谷歌可视化)图形的背景颜色
- 如何更改谷歌地图的颜色
- 谷歌图表背景颜色不适用于示例代码
- 用于编辑谷歌背景颜色的Chrome扩展程序
- 颜色色调我的谷歌地图
- 谷歌地理图表标记大小和颜色
- 将多种颜色应用于谷歌图表中的单个元素
- 谷歌图表仪表与多个颜色区域
- 如何在构建路线后在谷歌地图API中更改路线的颜色
- 使用谷歌地图API为谷歌地图上的不同位置提供不同的颜色
- 3 种颜色维度与谷歌可视化地理图表色标
- 如何填充谷歌地图数据图层的颜色
- 如何在谷歌地图中覆盖KML颜色
- 无法在谷歌地图符号 (svg) 标记中填充颜色
- 谷歌地图v3 - 多标记 - 不同的颜色
- 多边形颜色使用谷歌地图