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

莫非你请提供能够重现此问题的内容？我在[这个小提琴]（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));

材料图表仍处于测试阶段，所有的配置选项尚不可用... – WhiteHat

谢谢你@WhiteHat ..这似乎是对我来说最好的选择，因为我还没有找到一种方法来简单地包装文本显示为2行。虽然文字很小。它为我工作。谢谢 –

答

你可能绘制一个经典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>

他正在绘制条形图（谷歌“材料系列”的一部分），你的答案绘制了一个经典的柱状图。 [Here is]（http://jsfiddle.net/heennkkee/xa9Lys77/1/）是一个小提琴，你可以看到它们非常不同，例如工具提示，但也包括诸如酒吧圆角的小东西。 –

用于Google可视化图表的包装x轴标签文本

相关推荐