Google 可视化柱形图和条形图 vaxis 和 haxis 标签在 Firefox 3.6.12 和 IE 中重叠

Question

谁能帮我解决我在图表标签上遇到的这个问题 firefox 和 IE8、chrome 和 safari 上的标签正常工作 预期如此，但在 Firefox 和 IE 上，轴标签将重叠 彼此并且不会遵守任何 haaxis 或 vaxis 选项。我正在编码 在 ruby​​ on Rails 中并使用 erb 模板部分来写出我的 JavaScript。正如我之前所说，它在 chrome 和 safari 上运行得很好，但是 在 Firefox 和 IE8 上我遇到了这些轴标签问题。任何帮助 将不胜感激。

这是我正在执行的代码

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load('visualization', '1', {'packages':['corechart']});

google.setOnLoadCallback(drawBarChart);

function drawBarChart() {
  var bar_data = new google.visualization.DataTable();
  bar_data.addColumn('string', 'yaxis');
  bar_data.addColumn('number', 'xaxis');
  bar_data.addRows(5);
  var col = 0;
  <% array.each do |value| %>
    bar_data.setValue(col, 0, 'realllly longggggggggggggggggggggggggg');
    bar_data.setValue(col, 1, <%= value %>);
    col++;
  <% end %>

var bar_chart = new google.visualization.BarChart(document.getElementById('<%= element %>'));
bar_chart.draw(
  bar_data,
  {
    width: 870,
    height: 350,
    title: 'Quantity per Suspect Code',
    legend: 'none',
    vAxis: {
      textStyle: {
        fontSize: 11
      }
    },
    hAxis: {
      title: 'Quantity'
    }
  }
) };

  </script>

注释：元素 id 被传递给此部分，因此在本例中元素将是“line_chart”，呈现此部分的模板上的 id 是#line_chart

谢谢