如何在HTML5彈出窗口中顯示Google圖表

我剛剛開始使用HTML5和JQuery。我將在導航欄上顯示一個Google柱狀圖。我有以下代碼，但它不顯示popover內的圖表。有人可以幫我解決這個問題嗎？謝謝。如何在HTML5彈出窗口中顯示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>

來源

2013-05-06 Yashar

我能看到的問題，而是演示一個解決方案，我們就需要知道你正在使用的酥料餅插件 – PerryW 2013-05-07 23:57:16

我也修正它昨天以這種方式：我創建函數「點擊」在我的f irst腳本並在那裏聲明變量「圖表」。

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

來源

2013-05-08 07:22:00 Yashar

var chart = new google.visualization.ColumnChart（document.getElementById（'chart_div'））; //chart.draw(data，options）; – Yashar 2013-05-08 07:27:59

我將讓您使用引導你的酥料餅的一個猜測（基於HTML選項），但是這應該如果你正在使用別的東西成立。

基本問題是（我認爲）時機之一。創建圖表後，您需要填充彈出窗口。

我可以通過執行以下操作來完成這項工作。

在您的標記

<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內渲染圖表之後觸發的地方。甚至在裏面到底

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內容填滿酥料餅的drawChart功能？

你必須得到高度和寬度玩，但是我在這裏嘗試過了，它似乎工作確定

編輯

也許應該補充一個

$("#popcontainer").remove()

後來收拾整理並擺脫重複的ID

來源

2013-05-08 02:12:53 PerryW

我也修好了昨天這樣： – Yashar 2013-05-08 07:07:05

所以我們沒有第二個腳本中的這些代碼行。 – Yashar 2013-05-08 07:29:52

var chart = new google.visualization.ColumnChart（document.getElementById（'chart_div'））; chart.draw（data，options）; – Yashar 2013-05-08 07:30:09

如何在HTML5彈出窗口中顯示Google圖表

回答

相關問題