用於Google可視化圖表的包裝x軸標籤文本

我似乎無法用我的標籤包裝我的柱狀圖。我試着擺弄這些選項，但它沒有任何區別。這是我目前的走勢圖看，你可以看到列2標籤已經完全消失爲列1個標籤有重疊：用於Google可視化圖表的包裝x軸標籤文本

這是我的柱形圖查看：

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
        <script type="text/javascript"> 
         google.load("visualization", "1.1", { packages: ["bar"] }); 
         google.setOnLoadCallback(drawChart); 
         function drawChart() { 
          var data1 = google.visualization.arrayToDataTable([ 
           ['Faculty Name', 'Book', 'Book Chapter', 'Journal Article', 'Conference'], 
           @Html.Raw(rows)]); 

          var options = { 
           title: '', 
           'width': 800, 
           'height': 500 
          }; 

          var chart = new google.charts.Bar(document.getElementById('columnchart_material')); 
          chart.draw(data1, options); 
          } 
        </script> 
        <div id="columnchart_material" style="width: 800px; height: 500px;"></div>

來源

2015-09-28 Kivan Ilangakoon

莫非你請提供能夠重現此問題的內容？我在[這個小提琴]（http://jsfiddle.net/heennkkee/xa9Lys77/1/），但我沒有看到問題。要麼是問題是'@ Html.Raw（rows）'或其他奇怪的東西。 –

@HenrikAronsson：添加更多的行，你會看到它：http://jsfiddle.net/xa9Lys77/2/ –

您可以向下減小字體大小11，以獲取標籤顯示...

var options = { 
    'title': '', 
    'width': 800, 
    'height': 500, 
    'hAxis': {'textStyle': {'fontSize': 11}} 
};

要做到這一點，你需要轉換你的選擇......

chart.draw(data1, google.charts.Bar.convertOptions(options));

來源

2015-09-29 12:17:26 WhiteHat

材料圖表仍處於測試階段，所有的配置選項尚不可用... – WhiteHat

謝謝你@WhiteHat ..這似乎是對我來說最好的選擇，因爲我還沒有找到一種方法來簡單地包裝文本顯示爲2行。雖然文字很小。它爲我工作。謝謝 –

-1

你可能繪製一個經典ColumnChart（當它是一個選項）：

google.load("visualization", "1.1", { 
 
     packages: ["corechart"] 
 
     }); 
 

 
     google.load("visualization", "1.1", { 
 
     packages: ["corechart"] 
 
     }); 
 
     google.setOnLoadCallback(drawChart); 
 

 
     function drawChart() { 
 
     var data1 = google.visualization.arrayToDataTable([ 
 
      ['Faculty Name', 'Book', 'Book Chapter', 'Journal Article', 'Conference'], 
 
      ['Commerce, Law and Managment', 4, 9, 9, 1], 
 
      ['foobar',2,2,2,3], 
 
      ['Health Sciences', 0,2,3,1], 
 
      ['Humanities', 0, 1, 1, 0], 
 
      ['Science', 0, 0, 0, 1] 
 
     ]); 
 
     var options = { 
 
      title: '', 
 
      'width': 800, 
 
      'height': 500, 
 
      vAxis: { 
 
      gridlines: { 
 
       count: 10 
 
      } 
 
      } 
 
     }; 
 

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

<div id="columnchart_material" style="width: 800px; height: 500px;"></div> 
 
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

來源

2015-09-28 11:03:48

他正在繪製條形圖（谷歌「材料系列」的一部分），你的答案繪製了一個經典的柱狀圖。 [Here is]（http://jsfiddle.net/heennkkee/xa9Lys77/1/）是一個小提琴，你可以看到它們非常不同，例如工具提示，但也包括諸如酒吧圓角的小東西。 –

用於Google可視化圖表的包裝x軸標籤文本

回答

相關問題