响应式Google图表

Question

我试图使一个谷歌图表响应，但呈现的输出看起来像这样：！日期没有正确显示1我可以看到图表重新调整大小，但图形的内容可能不工作，图表内容JSON数据工作正常您可以看到与此json api附加的样本数据。

我需要一些帮助来使文本正确显示

以下是代码

<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 jsonData = $.ajax({
      url: "http://m.reporting.hero-leads.com/graph/campaign/0/0/4",
      dataType:"json",
      async: false
      }).responseText;  

  var data = new google.visualization.DataTable(jsonData);
  // Set chart options
  var options = {
    'title':'Leads',
    'vAxis': {title: '# Leads',  titleTextStyle: {color: 'black'}},
    'hAxis': {title: 'Days',  titleTextStyle: {color: 'black'},showTextEvery:1, slantedText:true, slantedTextAngle:90, minTextSpacing:1, textStyle:{color: '#333333', fontSize: 14},
    'width':(2*(window.innerWidth))/3,
    'height':(2*(window.innerHeight))/3,
    'legend':'bottom',
    'legendPosition':'sameRow'},
    legend: { position: 'top', maxLines: 3 },
    bar: { groupWidth: '30%' },
    colors: ['e46c0a','7f7f7f'],  
    isStacked: true,
    backgroundColor: { fill:'transparent' }
  };
   // Instantiate and draw our chart, passing in some options.
  function resize () {
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

  window.onload = resize();
  window.onresize = resize;

}
</script>
<div class="container">
  <div class="row-fluid">
    <div class="span12">
        <div id="chart_div" style="width: 100%; height: 300px;"></div>      
    </div>
  </div>
</div>

Answer 1

尝试使用窗口调整大小事件

我为半圆形饼图做了这件事。

请参考以下内容

http://www.codeproject.com/Tips/869927/Responsive-Semicircular-doughnut-Chart-Using-Googl

如果您不能理解，请参考以下代码。

<script type="text/javascript">

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

google.setOnLoadCallback(initChartExpertBottom);

$(window).on("resize", function (event) {
  initChartExpertBottom();
});

function initChartExpertBottom() {
  var options = {
    legend:'none',
    width: '100%',
    height: '100%',
    tooltip: { isHtml: true },
    chartArea: {left: "3%",top: "3%",height: "94%",width: "94%"},
    colors: ['#7CB5EC', '#5C5C61','#16c104'],
    pieHole: 0.50,
    pieStartAngle: -90,
    is3D: false,
    pieSliceText: 'none',
  };

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ["Hide" , (11+2)]                 //addition of value of all elements
  ]);
  drawChartExpertBottom(data, options);
}

function drawChartExpertBottom(data, options) {

  var tooltip = [
    Math.round((11/(11+2))*100) + "%",
    Math.round((2/(11+2))*100)+ "%",
    "Hiii3",
  ];

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));

  var sliceid = 0;

  function eventHandler(e){
    chart.setSelection([e]);
    try {
      selection = chart.getSelection();
      sliceid = selection[0].row;
    }
    catch(err) {
      ;
    }
    $(".google-visualization-tooltip-item-list li:eq(0)").css("font-weight", "bold");
    $(".google-visualization-tooltip-item-list li:eq(1)").html(tooltip[sliceid]).css("font-family", "Arial");
  }


  google.visualization.events.addListener(chart, 'onmousedown', eventHandler);
  google.visualization.events.addListener(chart, 'onmouseover', eventHandler);
  chart.draw(data, options);
}
</script>

以上脚本的HTML

<div id="piechart"></div>

上述代码片段的Css

<style>
#piechart {
  top: 0;
  left: 0;
  width:100%;
  height:100%;
}
.google-visualization-tooltip{
  display:table;
}
g{
  cursor:pointer;
}
</style>