admin管理员组文章数量:1435859
I'm using the Google visualization API barchart. I need to be able to do a few things with the following code:
- Display Percentages along the bottom. If there is 213 total, 81 should show 38%
/
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["dummy","Question 1", "Question 2", " Question 3"],
[0,81, 122, 10 ]
]);
var options = {
title: '',
vAxis: {
title: '',
gridlines : {
count : 5,
color: 'white'
}
},
hAxis: {
title: '',
format : '#%',
gridlines : {
count : 5,
color: 'white'
}
},
colors: ['#be1e2d', '#74b749', '#0daed3', '#ffb400', '#f63131'],
legend : {
position: 'bottom'
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
I'm using the Google visualization API barchart. I need to be able to do a few things with the following code:
- Display Percentages along the bottom. If there is 213 total, 81 should show 38%
http://jsfiddle/wesbos/EQ4kc/
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["dummy","Question 1", "Question 2", " Question 3"],
[0,81, 122, 10 ]
]);
var options = {
title: '',
vAxis: {
title: '',
gridlines : {
count : 5,
color: 'white'
}
},
hAxis: {
title: '',
format : '#%',
gridlines : {
count : 5,
color: 'white'
}
},
colors: ['#be1e2d', '#74b749', '#0daed3', '#ffb400', '#f63131'],
legend : {
position: 'bottom'
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
Share
Improve this question
edited Dec 29, 2013 at 6:39
Kara
6,22616 gold badges53 silver badges58 bronze badges
asked Sep 19, 2013 at 17:20
wesboswesbos
26.4k31 gold badges108 silver badges144 bronze badges
1 Answer
Reset to default 6In order to do that, you have to translate your data into percents. You can use a DataView to handle this:
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: data.getColumnLabel(1),
calc: function (dt, row) {
var val = dt.getValue(row, 1);
for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) {
total += dt.getValue(row, i);
}
var percent = val / total;
// what you do here depends on how you want to display the data in the tooltips
// option 1: use the value of the data point:
return {v: percent, f: dt.getFormattedValue(row, 1)};
// option 2: use the percent:
return {v: percent, f: (percent * 100).toFixed(2) + '%'};
}
}, {
type: 'number',
label: data.getColumnLabel(2),
calc: function (dt, row) {
var val = dt.getValue(row, 2);
for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) {
total += dt.getValue(row, i);
}
var percent = val / total;
// what you do here depends on how you want to display the data in the tooltips
// option 1: use the value of the data point:
return {v: percent, f: dt.getFormattedValue(row, 2)};
// option 2: use the percent:
return {v: percent, f: (percent * 100).toFixed(2) + '%'};
}
}, {
type: 'number',
label: data.getColumnLabel(3),
calc: function (dt, row) {
var val = dt.getValue(row, 3);
for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) {
total += dt.getValue(row, i);
}
var percent = val / total;
// what you do here depends on how you want to display the data in the tooltips
// option 1: use the value of the data point:
return {v: percent, f: dt.getFormattedValue(row, 3)};
// option 2: use the percent:
return {v: percent, f: (percent * 100).toFixed(2) + '%'};
}
}]);
Then you draw the chart with the view instead of data:
chart.draw(view, options);
本文标签: javascriptGoogle Visualization APIpercentage barsStack Overflow
版权声明:本文标题:javascript - Google Visualization API — percentage bars - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1745674046a2669740.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论