我正在使用谷歌图表来构建折线图。我正在使用类别过滤器来切换显示的列,如下面的小提琴所示。
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();
}
答案 0 :(得分:3)
试试这个:
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