谷歌圖表API的垂直標籤？

Question

任何人都知道如何讓x軸標籤與谷歌圖表API垂直？

我需要在很小的圖表中填入很多標籤。

感謝

Answer 1

的API不提供反正拿到verticle x軸標籤（除非我錯過了它，因爲我需要它太）我們所做的是數據點點標籤和定期x軸標記的組合 - 並不完美，但工作，如果你需要更多的控制

可以嘗試類似的Dundas圖表

Answer 2

我不找到一種方法來旋轉軸，但是，我所做的是縮短了標籤，然後創建一個圖例來解釋標籤實際代表什麼。

點擊here獲取Google圖表示例。

Answer 3

可以「解決」的另一種可能的方式這個問題是添加一個X軸：

chxt=x,y 

可以改變爲：

chxt=x,y,x 

（請確保你做了什麼你的原始x軸有相同的應用），然後在另一個x軸上（或每三分之一取決於標籤的長度）在一個軸上設置標籤，而在另一個軸上設置標籤。

chx1=0:|Alpha||Gamma||Epsilon||Eta|2:||Beta||Delta||Zeta 

注意兩個||之間爲空標籤。這樣你的圖表上的標籤關閉軸，你有更多的空間：

Alpha Gamma Epsilon Eta 
    Beta  Delta  Zeta 

Answer 4

這是一個古老的線程。但是我正在尋找此我自己和整個這次來到...

https://developers.google.com/chart/interactive/docs/gallery/areachart#Configuration_Options

查找：hAxis.slantedTextAngle和hAxis.slantedText。將您的角度設置爲90以進行垂直顯示（或傾斜的任何角度）。

Answer 5

現在

var options = { 
    title: "Test", 
    hAxis: { 
     direction:-1, 
     slantedText:true, 
     slantedTextAngle:90 // here you can even use 180 
    } 
}; 

Answer 6

可以添加參數選項與slantedtextangle：90度顯示標籤垂直

var options ={ hAxis: {title: "Years" , direction:-1, slantedText:true, slantedTextAngle:90 }} 

Answer 7

是的！

將hAxis.slantedText設置爲true，然後設置hAxis.slantedTextAngle = 90。 是這樣的...

var ac = new google.visualization.ComboChart(document.getElementById('visualization')); 
    ac.draw(data, { 
     title : 'Equipment Performance Chart', 
     isStacked:true, 
     vAxis: { 
     viewWindowMode: 'explicit', 
     viewWindow: { 
      max: 100 
      }, 
     title: "Percentage" 
     }, 
     hAxis: { 
     title: "Area", 
     slantedText:true, 
     slantedTextAngle:90 
     }, 
     seriesType: "bars", 

    }); 

Answer 8

的訣竅是在chartArea.height = 300和chartArea.top = 100，高度：600

var options = { 
    title: 'Motivation and Energy Level Throughout the Day', 
    isStacked: true, 
    height:600, 
    chartArea: { 
     height:300, 
     top:100, 
    }, 
    hAxis: { 
     title: 'Departamentos', 
     titleTextStyle: { 
     color: '#FF0000',    
     }, 

     slantedText:true, 
     slantedTextAngle:45, 

    }, 
    vAxis: { 
     title: 'Kits' 
    } 
    }; 

Answer 9

對角線此處的文本。這是我的做法，我希望它能幫助他們。

https://jsfiddle.net/8tvm9qk5/

代碼：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <div id="chart_div"></div> 

和

google.charts.load('current', {packages: ['corechart', 'bar']}); 
google.charts.setOnLoadCallback(drawStacked); 

function drawStacked() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Departamentos'); 
     data.addColumn('number', 'Entregados'); 
     data.addColumn('number', 'En Stock'); 

     data.addRows([ 
     ['abdasdasa', 925, 786], 
     ['bbdasdas', 652, 156], 
     ['cbdasdas', 300, 200], 
     ['ddasdasb', 925, 786], 
     ['edasdb', 652, 156], 
     ['fasdasb', 300, 200], 
     ['gdasdasdb', 925, 786], 
     ['abdasdasa', 925, 786], 
     ['bbdasdas', 652, 156], 
     ['cbdasdas', 300, 200], 
     ['ddasdasb', 925, 786], 
     ['edasdb', 652, 156], 
     ['fasdasb', 300, 200], 
     ['gdasdasdb', 925, 786] 


     ]); 

     var options = { 
     title: 'Motivation and Energy Level Throughout the Day', 
     isStacked: true, 
     height:600, 
     chartArea: { 
      height:300, 
      top:100, 
     }, 
     hAxis: { 
      title: 'Departamentos', 
      titleTextStyle: { 
      color: '#FF0000',    
      }, 

      slantedText:true, 
      slantedTextAngle:45, 

     }, 
     vAxis: { 
      title: 'Kits' 
     } 
     }; 

     var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    }