响应式Google图表数据不工作

Question

不幸的是，我不是一个开发人员，所以我试图弄清楚它是如何工作的。我有一些关于PHP，HTML和CSS的知识，但不幸的是，我对JavaScript一无所知。下面是我的Google Charts数据的当前代码，它是由一个模块导入的，javascript代码位于PHP文件的各个位置。下面是我的代码：

$js = "

google.setOnLoadCallback({$funcChart});

function {$funcChart}() {

    var data = google.visualization.arrayToDataTable(".json_encode($data).");

    var options = ".json_encode($options).";

    var chart = new google.visualization.{$chart}(document.getElementById('{$container}'));

    chart.draw(data, options);

}";

if(strpos($width, '%') !== false) {

    JHtml::_('JABehavior.jquery');

    $js .= "

    jQuery(document).ready(function () {

        jQuery(window).resize(function(){

            {$funcChart}();

        });

    });

    ";



}



$doc = JFactory::getDocument();

$doc->addScriptDeclaration($js);



require JModuleHelper::getLayoutPath($module->module, $params->get('layout', 'default'));

}

如何在上述代码中添加响应式函数？当前的图表在我的页面上看起来很奇怪；http://goo.gl/v1GVWk如果你打开页面并滚动到“徒步旅行地图”选项卡，你会看到图表，但它看起来非常糟糕。

Answer 1

尝试使用以下代码

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