如何在谷歌api圖表的堆積列圖表中使用底部欄中的註釋顯示軸值？

在這裏，我使用堆疊柱狀圖。在這張圖表中，我試圖顯示註釋值。註釋值顯示在欄頂部。但我需要顯示在底部的值。如何在谷歌api圖表的堆積列圖表中使用底部欄中的註釋顯示軸值？

實際： enter image description here

除外： enter image description here

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
    <!DOCTYPE html> 
    <html> 
     <head> 
      <title>Line chart for DAR</title> 
      <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
      <script type="text/javascript"> 
       google.load("visualization", "1", {packages: ["corechart"]}); 
       google.setOnLoadCallback(drawChart); 
       function drawChart() { 
        var data =new google.visualization.DataTable(); 
        data.addColumn({type: 'string', label: 'label'}); 
        data.addColumn({type: 'number', label: 'No visits'}); 
        data.addColumn({type: 'number', label: 'All members'});     
        data.addColumn({type: 'number', role: 'annotation'}); 
        data.addRows([['<2', 25, 23, 23], 
          ['2-5', 36, 37, 37], 
          ['6-8', 18, 19, 19], 
          ['9-11', 25, 26, 26], 
          ['12-15', 25, 24, 24], 
          ['16-19', 25, 21, 21], 
          ['20-34', 25, 22, 22], 
          ['35-49', 25, 28, 28], 
          ['50-64', 25, 29, 29], 
          ['65-74', 25, 30, 30], 
          ['75+', 25, 25, 25] 
        ]); 
        var options = {        
         isStacked: true, 
         vAxis: { 
          baselineColor: '#fff', 
          gridlineColor: '#fff', 
          textPosition: 'none' 
         },        
         tooltip: { 
          trigger: 'none' 
         }, 
         series: { 
          0: { 
           color: '#4169E1' 
          }, 
          1: { 
           color: '#87CEFA' 
          } 
         } 

        }; 
        var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_div')); 
        chart.draw(data, options); 
       } 
      </script> 
     </head> 
     <body> 
      <div id="columnchart_div" style="width: 900px; height: 500px;"></div> 
     </body> 
    </html>

來源

2014-01-10 Arunprasath

沒有辦法來控制註釋的位置。 – asgallant

我也有類似的需求，我的解決方案是一個自定義JavaScript函數。

我的情況有點不同，但它是一個很好的方法來做你所需要的。例如，請參閱下面的函數（我寫了一些評論）。

function fixAnnotationPos(){ 

    //the text tag 
    var textTags = document.getElementsByTagName("text"); 

    //bucle for each text tag 
    for (var i = 0; i < textTags.length; i++) { 

     // the attributes text-anchor, x and y are in each text tag of my annotation 
     if (textTags[i].hasAttribute("text-anchor") && textTags[i].hasAttribute("x") && textTags[i].hasAttribute("y")) { 

      var textanchor = textTags[i].getAttribute("text-anchor"); 
      var x = textTags[i].getAttribute("x"); 
      var fill = textTags[i].getAttribute("fill");             

      //in my case, only the annotations text have a attribute with 
      // name: text-anchor and value: end 
      // in your case, it can be different and maybe you need make exta validations 
      // my recomendations is see the tags and attributes in your SVG graph to make the correct validations. 
      if (textanchor == 'end') { 

       // now, I can change the X position and other styles easy. 
       // this can inspire you to do more stuff 
       x = parseInt(x) 
       textTags[i].setAttribute("x", x + 86); 
       textTags[i].setAttribute("fill", "#bfbfbf"); 
       textTags[i].setAttribute("font-weight", "bold"); 
       textTags[i].setAttribute("font-size", "13"); 


      } 
     } 
    } 

}

最後，你需要調用方法內部此功能：drawChart到底線，只繪出圖形後：

  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_div')); 

      fixAnnotationPos();

這裏一個簡單的例子與您的代碼。見註釋文本如何改變位置：

example in jsbin

來源

2014-02-20 21:07:32 herohat

use string type annotation for each stack

點擊此處查看回答 example in jsfiddle，你不能對齊底部，但，我們可以分配註釋每個堆棧酒吧

來源

2014-05-27 13:09:04

如何在谷歌api圖表的堆積列圖表中使用底部欄中的註釋顯示軸值？

回答

相關問題