[英]How can a google-chart be created within a new element I've just appended using jQuery?
For context, I'm trying to build a page that displays a google chart for all active sports games that day. 对于上下文,我正在尝试构建一个页面,以显示当天所有活动体育游戏的Google图表。 A data feed will inform how many there are (in my below example, 3 games going on.) From there, I would like to loop through the set of games, create a div for each one using jQuery, and then place a google chart into each div.
数据源将通知有多少个(在我的下例中,正在进行3个游戏。)从那里,我想遍历所有游戏,使用jQuery为每个游戏创建一个div,然后放置一个Google图表进入每个div Here's what I wrote:
这是我写的:
This would come from a data feed: 这将来自数据馈送:
var activeGames = 3;
Cycle through active games, build a chart for each one 循环进行中的游戏,为每个游戏建立图表
for (i = 0; i < activeGames; i++){
$('.chartContainer').append("<div id='game'></div>");
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Team A');
data.addColumn('number', 'Team B');
data.addRows([1,1]);
//chart data redacted, would come from data feed
var options = {
//chart options redacted, irrelevant
};
var chart = new google.visualization.LineChart(document.getElementById('game'));
chart.draw(data, options);
}
Relevant basics: 相关基础知识:
The chart displays fine if I create div id='g1' in an html file, but for some reason no charts display when the div is created by jquery, even though the divs DO get created. 如果我在html文件中创建div id ='g1' ,则图表显示正常,但是由于某种原因,即使通过div创建了div,通过jquery创建div时也不会显示任何图表。
Any help is appreciated. 任何帮助表示赞赏。
UPDATE: Here's what worked: 更新:这是起作用的:
Load google charts package 加载谷歌图表包
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
Call Function, the for loop goes within: 调用函数,for循环进入:
function drawChart() {
var activeGames = 3;
for (i = 0; i < activeGames; i++){
$('.container').append("<div id='g" + i + "'></div>");
var data = new google.visualization.DataTable();
data.addColumn('number', 'Team A');
data.addColumn('number', 'Time');
data.addRows([1,1]]); //redacted the rest
var options = {};//redacted
var chart = new google.visualization.LineChart(document.getElementById('g'+ i));
chart.draw(data, options);
};
}; };
load google first, wait for the callback
, then draw the charts... 首先加载谷歌,等待
callback
,然后绘制图表...
google.charts.load
only needs to be called once per page load 每次加载一次
google.charts.load
只需要调用一次
no need to load
for each chart 无需为每个图表
load
since you're creating a new <div>
for each chart, 由于您要为每个图表创建一个新的
<div>
,
create the div and pass it to the chart's constructor 创建div并将其传递给图表的构造函数
no need to assign an id
, which would need to be unique anyway 无需分配
id
,无论如何它应该是唯一的
see following working snippet... 请参阅以下工作片段...
google.charts.load('current', { callback: drawCharts, packages: ['corechart'] }); function drawCharts() { var activeGames = 3; for (i = 0; i < activeGames; i++){ var data = new google.visualization.DataTable(); data.addColumn('number', 'Team A'); data.addColumn('number', 'Team B'); data.addRow([1,1]); var options = { }; var container = document.createElement('div'); $('.chartContainer').append(container); var chart = new google.visualization.LineChart(container); chart.draw(data, options); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div class="chartContainer"></div>
Part of the issue is that the id
should be unique to the page. 问题的一部分是该
id
对页面而言应该是唯一的。 So when creating the div
, you should make it unique: 因此,在创建
div
,应使其具有唯一性:
$('.chartContainer').append("<div id='game" + i + "'></div>");
Then, when selecting the div
, select the correct div
: 然后,在选择
div
,选择正确的div
:
var chart = new google.visualization.LineChart(document.getElementById('game' + i));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.