我正在使用 Google柱形图 为我的应用程序创建柱形图。我希望每个酒吧都可以使用不同的颜色。我正在将colors属性插入options变量,但是不起作用。
有人可以帮我吗?
Add commas or spaces to group every three digits
var options = {
title: 'Motivation Level Throughout the Day',
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
},
tooltip: {isHtml: true},
colors: ['red','yellow', 'blue', 'red','yellow', 'blue', 'red','yellow', 'red','yellow']
};
答案 0 :(得分:1)
colors
配置选项中的每种颜色都映射到数据表中的每个系列
系列由数据表中x轴列之后的每一列表示
在这里,x轴之后只有一个系列/数据表列
[{v: [8, 0, 0], f: '8 am'}, 46], // <-- one series column
[{v: [9, 0, 0], f: '9 am'}, 46],
要使用colors
,它的外观应类似于...
[{v: [8, 0, 0], f: '8 am'}, 46, null, null, null],
[{v: [9, 0, 0], f: '9 am'}, null, 46, null, null],
[{v: [10, 0, 0], f:'10 am'}, null, null, 34, null],
[{v: [11, 0, 0], f: '11 am'}, null, null, null, 4],
相反,我们可以使用'style'
列角色,
这使我们可以更改每一行的颜色...
[{v: [8, 0, 0], f: '8 am'}, 46, 'red'],
[{v: [9, 0, 0], f: '9 am'}, 46, 'yellow'],
请参阅以下工作片段,
'style'
列已添加到数据视图中,
颜色是从现有的colors
选项中提取的...
google.charts.load('current', {
packages: ['corechart']
}).then(drawBasic);
function drawBasic() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('timeofday', 'Time of Day');
dataTable.addColumn('number', 'Motivation Level');
dataTable.addRows([
[{v: [8, 0, 0], f: '8 am'}, 46],
[{v: [9, 0, 0], f: '9 am'}, 46],
[{v: [10, 0, 0], f:'10 am'}, 34],
[{v: [11, 0, 0], f: '11 am'}, 4],
[{v: [12, 0, 0], f: '12 pm'}, 5],
[{v: [13, 0, 0], f: '1 pm'}, 6],
[{v: [14, 0, 0], f: '2 pm'}, 7],
[{v: [15, 0, 0], f: '3 pm'}, 8],
[{v: [16, 0, 0], f: '4 pm'}, 9],
[{v: [17, 0, 0], f: '5 pm'}, 10],
]);
var options = {
title: 'Motivation Level Throughout the Day',
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
},
tooltip: {isHtml: true},
colors: ['red', 'yellow', 'blue', 'red', 'yellow', 'blue', 'red', 'yellow', 'red', 'yellow'],
legend: {
position: 'none'
}
};
// create view with tooltip columns for each series
var viewColumns = [0];
var dataView = new google.visualization.DataView(dataTable);
$.each(new Array(dataTable.getNumberOfColumns()), function (index) {
// ignore x-axis column
if (index === 0) {
return;
}
// add series column
viewColumns.push(index);
// add tooltip column - column role should directly follow the series it represents
viewColumns.push({
calc: function (dt, row) {
// build tooltip
var tooltip = '<div class="ggl-tooltip"><div><span>';
tooltip += dt.getFormattedValue(row, 0) + '</span></div>';
tooltip += '<div>' + dt.getColumnLabel(index) + ': ';
tooltip += '<span>' + dt.getFormattedValue(row, index) + '</span></div>';
tooltip += '<div>Add whatever you want for column: ' + index + ', row: ' + row + '</div></div>';
return tooltip;
},
p: {html: true},
role: 'tooltip',
type: 'string'
});
// add style column for color
viewColumns.push({
calc: function (dt, row) {
// get color based on row index
return options.colors[row];
},
role: 'style',
type: 'string'
});
});
dataView.setColumns(viewColumns);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataView.toDataTable(), options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
注意:使用'style'
列角色会使图例无效,
只会显示第一种颜色(第一个系列的颜色)
答案 1 :(得分:0)
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var dataTable = new google.visualization.arrayToDataTable([]);
dataTable.addColumn('timeofday', 'Time of Day');
dataTable.addColumn('number', 'Motivation Level');
dataTable.addRows([
[{v: [8, 0, 0], f: '8 am'}, 46],
[{v: [9, 0, 0], f: '9 am'}, 46],
[{v: [10, 0, 0], f:'10 am'}, 34],
[{v: [11, 0, 0], f: '11 am'}, 4],
[{v: [12, 0, 0], f: '12 pm'}, 5],
[{v: [13, 0, 0], f: '1 pm'}, 6],
[{v: [14, 0, 0], f: '2 pm'}, 7],
[{v: [15, 0, 0], f: '3 pm'}, 8],
[{v: [16, 0, 0], f: '4 pm'}, 9],
[{v: [17, 0, 0], f: '5 pm'}, 10],
]);
var options = {
title: 'Motivation Level Throughout the Day',
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
},
tooltip: {isHtml: true},
colors: ['#FFD700', '#C0C0C0', '#8C7853']
};
// create view with tooltip columns for each series
var viewColumns = [0];
var dataView = new google.visualization.DataView(dataTable);
$.each(new Array(dataTable.getNumberOfColumns()), function (index) {
// ignore x-axis column
if (index === 0) {
return;
}
// add series column
viewColumns.push(index);
// add tooltip column - column role should directly follow the series it represents
viewColumns.push({
calc: function (dt, row) {
// build tooltip
var tooltip = '<div class="ggl-tooltip"><div><span>';
tooltip += dt.getFormattedValue(row, 0) + '</span></div>';
tooltip += '<div>' + dt.getColumnLabel(index) + ': ';
tooltip += '<span>' + dt.getFormattedValue(row, index) + '</span></div>';
tooltip += '<div>Add whatever you want for column: ' + index + ', row: ' + row + '</div></div>';
return tooltip;
},
p: {html: true},
role: 'tooltip',
type: 'string'
});
});
dataView.setColumns(viewColumns);
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(dataView.toDataTable(), options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>