javascript - 如何在google api图表的折线图笔划中显示点值？

Question

我在 google 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>

Answer 1

您只需更正列定义的顺序:

data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn({type: 'number', role: 'annotation'});

编辑:请参阅 asgallant 关于正确的列顺序的评论。我下面的文字不完全正确。

尽管Google's documentation不是很清楚，你应该总是首先指定 x 轴，然后是值，最后加上注释之类的东西。