如何在HTML5弹出窗口中显示Google图表 | 如何在HTML5弹出窗口中显示Google图表

本文介绍了如何在HTML5弹出窗口中显示Google图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚刚开始使用HTML5和JQuery。我将在导航栏上显示一个Google柱状图。我有以下代码，但它不显示popover内的图表。有人可以帮我解决这个问题吗？

I have just started working with HTML5 and JQuery. I'm going to show a Google column-chart inside a popover on navbar. I have the following code, but it doesn't show the chart inside the popver. Can someone help me fix this problem? Thanks.

<a id="electricity" class="action" rel="popover">Elpriser</a>
<script>
$("#electricity")
    .popover(
        { placement : 'top', html : true,
           content : '<div class="popover-content-el"><div class="lable-electricity"><h3>Nordpool</h3></div><div id="chart_div" style="width: 300px; height: 200px;"></div></div>'
        });
 </script>
 <script type="text/javascript">
google.load("visualization", "1", {
  packages : [ "corechart" ]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
      [ 'SE1', 'Idag', 'Imorgon' ], [ 'SE1', 1170, 460 ],
      [ 'SE2', 1170, 460 ], [ 'SE3', 660, 1120 ],
      [ 'SE4', 1030, 540 ] ]);

  var options = {

    vAxis : {
      textPosition : 'none',
      gridlines : {
        color : "#ffffff"
      }
    },

  };

  var chart = new google.visualization.ColumnChart(document
      .getElementById('chart_div'));
  chart.draw(data, options);

}
</script>

推荐答案

在我的第一个脚本中使用click，并在那里声明变量chart。

I also fixed it yesterday in this way: I created function "click" in my first script and declared variable "chart" inside there.

<script type="text/javascript">
$("#electricity")
    .popover(
        {
          placement : 'top',
          html : true,
          content : '<div class="popover-content-el popover.top"><div class="lable-electricity"><h3>Nordpool</h3><div id="chart_div" style="width:700px; height:150px;"></div></div></div><\/script>'
        });

    $("#electricity").click(function(e) {
      var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
      chart.draw(data, options);
    } );

这篇关于如何在HTML5弹出窗口中显示Google图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！