如何在google api圖表的折線圖中顯示點值？

我在google api圖表中使用線圖。在這個圖表中，我需要顯示點上方的vaxis值，但是我使用的是註釋。它在靠近haxis的位置創建了一個點值。但是我需要在點之上。如何在google api圖表的折線圖中顯示點值？

實際圖表：

enter image description here

預計圖表：

enter image description here

<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>

來源

2013-11-23 Arunprasath

您只需糾正列定義的運用順序：

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

編輯：查看asgallant對正確列順序的評論。我的下面的文字不完全正確。

雖然Google's documentation不太清楚，但您應該總是先指定x軸，然後是值，然後將註釋放在最後。

來源

2013-11-23 12:52:12

註釋不會結束，它們會追溯到它們應用的列。如果要在域軸上註釋，則註釋列應該是第二個。如果您需要第一個數據系列上的註釋，則註釋列需要立即跟隨它。如果您有兩組數據，並且想要對第一組數據進行註釋，那麼註釋列將不得不在DataTable中的兩個系列的列之間。 – asgallant

我正在使用添加列格式年，銷售和註釋。但圖表有四點。在該圖表中，前兩個v軸值顯示在上面的點上，其餘兩個v軸值顯示在該點下面。圖表顯示更新的答案。 – Arunprasath

如何在google api圖表的折線圖中顯示點值？

回答

相關問題