如何更改谷歌条形图数据标签的位置? 我希望在条形图之间有数据标签(2003,2004,...) - 不像它现在那样直接在它们之下。enter image description here
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
['2003', 1336060, 400361, 1001582, 997974],
['2004', 1538156, 366849, 1119450, 941795],
['2005', 1576579, 440514, 993360, 930593],
['2006', 1600652, 434552, 1004163, 897127],
['2007', 1968113, 393032, 979198, 1080887],
['2008', 1901067, 517206, 916965, 1056036]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('chart')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"}, isStacked: true,
hAxis: {title: "Cups"}}
);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawVisualization);
答案 0 :(得分:0)
以下是一些选项......
我已添加null
行来分隔数据并将标签移至null
行。
这会使标签出现在第二行
我认为maxAlternation
可能会纠正这个问题,但只会偏向文本。
CHART_1对我来说是最好的......
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// add null data for label placement
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
[null, 1336060, 400361, 1001582, 997974],
['2003', null, null, null, null],
[null, 1538156, 366849, 1119450, 941795],
['2004', null, null, null, null],
[null, 1576579, 440514, 993360, 930593],
['2005', null, null, null, null],
[null, 1600652, 434552, 1004163, 897127],
['2006', null, null, null, null],
[null, 1968113, 393032, 979198, 1080887],
['2007', null, null, null, null],
[null, 1901067, 517206, 916965, 1056036],
['2008', null, null, null, null]
]);
var options = {
width: 600,
height: 400,
vAxis: {
title: "Year"
},
isStacked: true,
hAxis: {
title: "Cups"
}
};
// labels appear on second line (of course)
options.title = 'CHART_0';
var chart1 = new google.visualization.ColumnChart(
document.getElementById('chart0')
).draw(data, options);
// maxAlternation slants the text
options.title = 'CHART_1';
options.hAxis.maxAlternation = 1;
var chart1 = new google.visualization.ColumnChart(
document.getElementById('chart1')
).draw(data, options);
// can only control slant 1-90
// setting to zero causes labels not to display
options.title = 'CHART_2';
options.hAxis.slantedText = true;
options.hAxis.slantedTextAngle = 90;
var chart1 = new google.visualization.ColumnChart(
document.getElementById('chart2')
).draw(data, options);
drawVisualizationLeft();
}
function drawVisualizationLeft() {
// add null data for label placement
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
['2003', null, null, null, null],
[null, 1336060, 400361, 1001582, 997974],
['2004', null, null, null, null],
[null, 1538156, 366849, 1119450, 941795],
['2005', null, null, null, null],
[null, 1576579, 440514, 993360, 930593],
['2006', null, null, null, null],
[null, 1600652, 434552, 1004163, 897127],
['2007', null, null, null, null],
[null, 1968113, 393032, 979198, 1080887],
['2008', null, null, null, null],
[null, 1901067, 517206, 916965, 1056036]
]);
var options = {
width: 600,
height: 400,
vAxis: {
title: "Year"
},
isStacked: true,
hAxis: {
title: "Cups"
}
};
// maxAlternation slants the text
options.title = 'CHART_3';
options.hAxis.maxAlternation = 1;
var chart3 = new google.visualization.ColumnChart(
document.getElementById('chart3')
).draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart0"></div>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
&#13;