function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addRows([
['Foo', 2],
['Bar', 4],
['Baz', -3],
['Cud', 6],
['Waq', -8],
['Bat', -2],
['Cad', 5],
['Giv', 3],
['Muj', 9],
['Lof', -7],
['Duq', 5],
['Kaf', 1],
['Zij', 4]
]);
var view = new google.visualization.DataView(data);
// add as many different series as needed
// make sure all possible values are covered, so you don't have any gaps where a data point can't be assigned to a series
view.setColumns([0, {
type: 'number',
label: 'Value',
calc: function (dt, row) {
// if the value is less than 0, add to the red series
return (dt.getValue(row, 1) < 0) ? dt.getValue(row, 1) : null;
}
}, {
type: 'number',
label: 'Value',
calc: function (dt, row) {
// if the value is greater than or equal to 0, add to the green series
return (dt.getValue(row, 1) >= 0) ? dt.getValue(row, 1) : null;
}
}]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, {
legend: 'none',
isStacked: true,
height: 300,
width: 800,
// set the colors to use for the series (in the same order as the columns in the view)
colors: ['red', 'green']
/* or you can use the series.<series index>.color option to assign colors to specific series:
series: {
0: {
color: 'red'
},
1: {
color: 'green'
}
}
*/
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
1 回答
由于所有条形都按数据系列着色，因此您必须将条形图分成不同的系列，以使它们具有不同的颜色 . 您可以在DataView中使用计算列来完成此操作：
看到它在这里工作：http://jsfiddle.net/asgallant/dMWWk/