響應式Google圖表數據不起作用

Question

不幸的是我不是開發人員，所以我試圖弄清楚它是如何工作的。 我對PHP，HTML和CSS有所了解，但不幸的是，對JavaScript卻一無所知。 下面是我當前的Google Charts Data代碼，由模塊導入，而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>