如何在 HTML5 的弹出框中显示谷歌图表

Question

我刚刚开始使用 HTML5 和 JQuery。我将在导航栏的弹出框内显示 Google 柱形图。我有以下代码，但它没有显示弹出框内的图表。有人可以帮我解决这个问题吗？谢谢。

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

Answer 1

我将猜测（基于 html 选项）您正在使用 Bootstrap 作为弹出框，但如果您使用其他东西，这应该成立。

基本问题是（我认为）时间问题之一。创建图表后，您需要填充弹出框。

我可以通过执行以下操作来完成这项工作。

在您的标记中

<a id="electricity" class="action" rel="popover">Elpriser</a>
<div id = "popcontainer" class="popover-content-el" style="display:none">
    <div class="lable-electricity">
        <h3>Nordpool</h3>
    </div>
    <div id="chart_div" style="width: 300px; height: 200px;">
    </div>
</div>

这只是获取您的内容，给它一个 id 并隐藏它。

然后，我会将弹出框创建代码放在图表在隐藏 div 内呈现后触发的位置。甚至可能在最后的 drawChart 函数中

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

  $("#electricity")
    .popover(
        { placement : 'bottom', html : true,
           content : $("#popcontainer").html()
        });

你看到我们如何使用隐藏 div 的 html 内容来填充弹出框了吗？

你必须使用高度和宽度，但我在这里尝试过，它似乎工作正常

编辑

应该加个

$("#popcontainer").remove()

然后整理并摆脱重复的ID

Answer 2

我昨天也以这种方式修复了它：我在我的第一个脚本中创建了函数“click”，并在其中声明了变量“chart”。

<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);
    } );