我有一个使用＆＃34; classic＆＃34;生成的柱形图。核心图表包。
但是，我不明白如何将列值作为标签放在每个栏的顶部。 （例如，第一个是8.50）。
这是我的代码：
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[
"",
"Hamburgers",
"Pizzas",
"Flutes",
"Wraps"
],
["29-04-2017", 8.50, 8.2, 8.4, 5.5],
["13-05-2017", 8.60, 8.32, 8.53, 5.67],
["12-06-2017", 8.30, 8.72, 8.13, 5.37],
["23-08-2017", 8.50, 8.22, 8.43, 5.57]
]);
var options = {
chart: {
title: ' ',
animation: {
duration: 2000,
easing: "out",
startup: true
}
},
legend: {position:'top'},
hAxis: { format: "date" },
vAxis: {
format: 'decimal',
viewWindow:{
max:10,
min:0
}
},
height: 400,
bars: 'vertical',
colors: ["#0F5470", "#8EA3A4", "#3EB8BC", "#98D4F2"]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
答案 0 :(得分：1)
您可以使用注释 column role向条形图添加标签
注释列应该遵循数据表中的系列列请参阅以下工作代码组
在这里，DataView用于为每个系列添加注释列...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
[
"",
"Hamburgers",
"Pizzas",
"Flutes",
"Wraps"
],
["29-04-2017", 8.50, 8.2, 8.4, 5.5],
["13-05-2017", 8.60, 8.32, 8.53, 5.67],
["12-06-2017", 8.30, 8.72, 8.13, 5.37],
["23-08-2017", 8.50, 8.22, 8.43, 5.57]
]);
// build view
var viewColumns = [0];
$.each(new Array(data.getNumberOfColumns() - 1), function (index) {
viewColumns.push(index + 1);
viewColumns.push({
calc: function (dt, row) {
return dt.getFormattedValue(row, index + 1);
},
role: 'annotation',
type: 'string'
});
});
var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);
var options = {
chart: {
title: ' ',
animation: {
duration: 2000,
easing: "out",
startup: true
}
},
legend: {position:'top'},
hAxis: { format: "date" },
vAxis: {
format: 'decimal',
viewWindow:{
max:10,
min:0
}
},
height: 400,
bars: 'vertical',
colors: ["#0F5470", "#8EA3A4", "#3EB8BC", "#98D4F2"]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
$(window).resize(function() {
chart.draw(view, 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>
编辑
如果您知道数据表中的列数，则 然后你不需要动态构建它们
setColumns方法采用数组，
数组中的每个条目都可以是列索引 - ＆gt; 0
或者一个物体，如果使用计算出的列...
{
calc: function (dt, row) {
return dt.getFormattedValue(row, 1);
},
role: 'annotation',
type: 'string'
}
在这种情况下，我们需要包含数据表中的列，
和每个注释列的计算列
请参阅以下工作代码段...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
[
"",
"Hamburgers",
"Pizzas",
"Flutes",
"Wraps"
],
["29-04-2017", 8.50, 8.2, 8.4, 5.5],
["13-05-2017", 8.60, 8.32, 8.53, 5.67],
["12-06-2017", 8.30, 8.72, 8.13, 5.37],
["23-08-2017", 8.50, 8.22, 8.43, 5.57]
]);
// build view
var view = new google.visualization.DataView(data);
view.setColumns([
0, // <-- x-axis column index
1, // <-- first y-axis column index
{ // annotation column for first y-axis column
calc: function (dt, row) {
return dt.getFormattedValue(row, 1); // get formatted value from first y-axis column
},
role: 'annotation',
type: 'string'
},
2, // <-- second y-axis column index
{ // annotation column for second y-axis column
calc: function (dt, row) {
return dt.getFormattedValue(row, 2); // get formatted value from second y-axis column
},
role: 'annotation',
type: 'string'
},
3,
{
calc: function (dt, row) {
return dt.getFormattedValue(row, 3);
},
role: 'annotation',
type: 'string'
},
4,
{
calc: function (dt, row) {
return dt.getFormattedValue(row, 4);
},
role: 'annotation',
type: 'string'
}
]);
var options = {
chart: {
title: ' ',
animation: {
duration: 2000,
easing: "out",
startup: true
}
},
legend: {position:'top'},
hAxis: { format: "date" },
vAxis: {
format: 'decimal',
viewWindow:{
max:10,
min:0
}
},
height: 400,
bars: 'vertical',
colors: ["#0F5470", "#8EA3A4", "#3EB8BC", "#98D4F2"]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
$(window).resize(function() {
chart.draw(view, 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>
注意
您无法使用常规for循环动态构建列的原因，
是因为我们在对象
在这种情况下，引用会保存到i
{
calc: function (dt, row) {
return dt.getFormattedValue(row, i);
},
role: 'annotation',
type: 'string'
}
当循环结束并且setColumns中使用了列时，
所有列都引用i，这是循环的最后一个值
在循环中使用i的值，而不是对i的引用
然后构建的对象必须在闭包或函数
中这就是原始答案中使用$.each语句的原因
这会创建一个闭包，并使用index的值，
而不是对index
$.each(new Array(data.getNumberOfColumns() - 1), function (index) { // <-- this creates the closure...
viewColumns.push(index + 1);
viewColumns.push({
calc: function (dt, row) {
return dt.getFormattedValue(row, index + 1);
},
role: 'annotation',
type: 'string'
});
});