如何在Google API图表的折线图笔划中显示点值？

Question

我在Google API图表中使用折线图。在此图表中，我需要在point上方显示vaxis值。但是我正在使用批注。它在haxis附近创建点值。但是我需要在point之上。

实际图表：

预期图表：

    <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 的文档对此不太清楚，但您应该始终先指定 x 轴，然后指定值，并在最后添加注释等内容。