如何在HTML5中以popover显示Google图表

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

Elpriser  $("#electricity") .popover( { placement : 'top', html : true, content : '
Nordpool
' });   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); }  

Answer 1

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

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

我可以通过以下方式完成这项工作。

在你的标记中

 Elpriser 
 
 
Nordpool
 
 
 
  

这只是把你的内容，给它一个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内容来填充popover？

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

编辑

应该添加一个

 $("#popcontainer").remove() 

然后整理并摆脱重复的ID

Answer 2

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