jQuery 如何标记谷歌柱状图栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17047650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to label Google Column Chart bars
提问by Watt
I am using Google Chart APIto create chart for values which goes from 1 to millions.
我正在使用Google Chart API为从 1 到数百万的值创建图表。
ProblemThe bars which are representing smaller values (ex: less than 50 or so) are invisible on graph and no way I can see what values correspond to certain x-axis.
问题代表较小值（例如：小于 50 左右）的条形图在图形上不可见，我无法看到哪些值对应于某个 x 轴。
This would be solved if I can somehow print y-axis values on top of bars.But, I couldn't find any mention in the API doc on how to do it.
如果我能以某种方式在条形顶部打印 y 轴值，这将得到解决。但是，我在 API 文档中找不到任何关于如何执行此操作的提及。
There is similar problem here, but it doesn't answers my question.
这里有类似的问题，但它没有回答我的问题。
put labels on top of inside bar in google interactive bar chart
There are some other more than year old unanswered questions here, I am hoping someone might have found a solution or a workaroundby now, that is why asking this question again.
这里还有一些其他多年前未回答的问题，我希望现在有人可能已经找到了解决方案或解决方法，这就是为什么再次提出这个问题的原因。
Google Visualization: Column Chart, simple question but can't find the answer
How to show values on the the top of columns Google Chart API
Can you show me how to achieve what I want using How can I customize this Google Bar Chart??
你能告诉我如何使用如何自定义这个谷歌条形图来实现我想要的吗？?
回答by Jeremy Faller
Check out Andrew Gallant's JSFiddle here:
在这里查看 Andrew Gallant 的 JSFiddle：
http://jsfiddle.net/asgallant/QjQNX/
http://jsfiddle.net/asgallant/QjQNX/
It uses a clever hack of a combo chart to accomplish what I think you're looking for.
它使用组合图表的巧妙技巧来完成我认为您正在寻找的内容。
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
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
}
});
}
回答by augustomen
I had some setbacks using annotation and the invisible line (for example, having it displayed in the tooltip as another series).
我在使用注释和不可见线时遇到了一些挫折（例如，将它作为另一个系列显示在工具提示中）。
I've made a hack to the ComboChart(could work with BarChartand ColumnChartas well, with a couple of changes) to insert the labels into the SVG.
我已经对ComboChart（可以使用BarChart并且ColumnChart也可以进行一些更改）进行了修改，以将标签插入到 SVG 中。
Check out this fiddle: http://jsfiddle.net/augustomen/FE2nh/
看看这个小提琴：http: //jsfiddle.net/augustomen/FE2nh/
Tested on Firefox 21, Chrome 27 and IE 9.
在 Firefox 21、Chrome 27 和 IE 9 上测试。
