我在谷歌api图表中使用线图。在此图表中,我需要在点上方显示vaxis值。但我正在使用注释。它在近haxis中创建点值。但是我需要在点之上。
实际图表:
预期图表:
<script type="text/javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn({type: 'number', role: 'annotation'});
data.addRows([
['2008', 23, 23],
['2009', 145, 145],
['2010', 245, 245],
['2011', 350, 350]
]);
var options = {
width: 400,
height: 100,
pointSize: 4,
legend: {position: 'none'},
chartArea: {
left: 0,
top: 10,
width: 400,
height: 50},
vAxis: {
baselineColor: '#fff',
gridlines: {color: 'transparent'}
},
tooltip: {trigger: 'none'},
annotation: {
1: {
style: 'none'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
答案 0 :(得分:1)
您只需更正列定义的顺序:
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn({type: 'number', role: 'annotation'});
编辑:请参阅asgallant对正确的列顺序的评论。我的下面的文字并不完全正确。
虽然Google's documentation对此并不清楚,但您应该首先指定x轴,然后指定值,并在结尾处添加注释等内容。