我正在使用谷歌图表生成柱形图,如下图所示:
http://postimg.org/image/mt7tzwwob/
这里,数据将类似于 [['a', 1], ['b', 2], ['c', 3]]
在这里,我在 vaxis 的左侧得到值 1,2,3,这对我来说没问题。
我想要额外的是:垂直条顶部的百分比。
x+2x+3x = 100, means, x=16, 2x=33, 3x=50. So, 16% should be at top of vertical bar with value 1.
如何获得这些百分比?
最佳答案
ColumnChart 不支持添加标签,例如列上方的百分比,但有一种解决方法,涉及使用 ComboChart 和隐藏线来添加它们。以下是一些添加标签的示例代码(您可以将标签替换为您想要的百分比):
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([
['Foo', 53, 'Foo text'],
['Bar', 71, 'Bar text'],
['Baz', 36, 'Baz text'],
['Cad', 42, 'Cad text'],
['Qud', 87, 'Qud text'],
['Pif', 64, 'Pif text']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 1, 2]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, {
height: 400,
width: 600,
series: {
0: {
type: 'bars'
},
1: {
type: 'line',
color: 'grey',
lineWidth: 0,
pointSize: 0,
visibleInLegend: false
}
},
vAxis: {
maxValue: 100
}
});
}
在这里查看它的工作情况:http://jsfiddle.net/asgallant/QjQNX/
这只适用于具有单系列数据的图表(因为如果有多个系列,标签将会错位)。
关于javascript - 谷歌图表 API - 柱形图 - 垂直条上方的百分比以及 vaxis 左侧的正常值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20141298/