将Google可视化图表的多个实例组合成一个页面，并将各个div分开 [英] Multiple instances of Google Visualization charts into one page, separate divs
问题描述
我在将图表加载到单个页面时遇到问题。使用这里提供的指导：
https://developers.google.com/chart/interactive/docs/basic_load_libs
和这里：
Google可视化的多个实例独立科室内图表（加载图表的代码部分） 这是我的代码： 然后进入页面，我指定了加载条形图的ID： 然而，每次将两个图表中的一个显示在我的页面中时。 我的浏览器的控制台很清晰（没有错误或警告），我可以在第一页加载第一个图表时加载第二个图表加载第二个图表加载。看到脚本（data，data2，chart，chart2）中创建的对象正常生成。然而，在每种情况下，没有生成的图表都有一个空的innerHTML元素。 例如，innerHTML对于未加载的图表是空的： 加载图表时的innerHTML： 如果不是：google.charts.Bar我使用：google.visualization.BarChart，然后两个图表加载精细。然而，我需要使用google.charts.Bar.... WhiteHat 是正确的，但由于某种原因，您可以尝试使用 I am having a problem loading to google charts into a single page. Using guideliness provided here: https://developers.google.com/chart/interactive/docs/basic_load_libs and here: Multiple Instances of Google Visualizations Chart Inside Separate Divs (the part of code loading the charts) Here is my code: And further down into the page i am specifying the IDs to load the bar charts: However each time one of the two charts is depicted into my page. On first page load the first chart is loaded while on the second page load the second chart is loaded. My browser's console is clear (no errors or warnings) and i can see that the objects created in script (data, data2, chart, chart2) are generated normally. However in each case the chart that is not generated has an empty innerHTML element. For example the innerHTML for the chart NOT loaded is empty: while the innerHTML for the chart loaded: If instead of: google.charts.Bar i use: google.visualization.BarChart then both charts load fine. However i need to use "google.charts.Bar" .... WhiteHat is right but for some reason you can try also with
这篇关于将Google可视化图表的多个实例组合成一个页面，并将各个div分开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< script type =text / javascript>
$ b google.load（'visualization'，'1'，{
packages：['bar']
}）;
google.setOnLoadCallback（drawStuff）;
function drawStuff（）{
/ * SCAN TIME * /
var data = new google.visualization.arrayToDataTable（[<％= JSONScanTimeArray％>]）;
console.log（data）;
var options = {
width：750，
height：400，
chart：{
title：'SCAN TIME'，
}};
var chart = new google.charts.Bar（document.getElementById（'chart_div'））;
console.log（图表）;
chart.draw（data，options）;
/ * IMAGE ARTIFACTS * /
var data2 = new google.visualization.arrayToDataTable（[<％= JSONIQArray％>]）;
console.log（data2）;
var options2 = {
width：750，
height：400，
图表：{
title：'图像质量'，
}};
var chart2 = new google.charts.Bar（document.getElementById（'chart_div2'））;
console.log（chart2）;
chart2.draw（data2，options2）;
}
< / script>
< div>
< div id =chart_divstyle =display：inline-block; margin：10px;>< / div>
...
< div id =chart_div2style =display：inline-block; margin：10px;>< / div>
< / div>
innerHTML：< div style =position：relative;宽度：750px; height：400px;>< div style =position：absolute; left：0px; top：0px;宽度：100％; >< svg width =750height =400>< defs>< / defs>< / svg>< / div>< / div>
innerHTML：< div style =position：relative;宽度：750px; height：400px;>< div style =position：absolute; left：0px; top：0px;宽度：100％;高度：100％;>< svg width =750height =400>< defs>< filter x = - 100％y = - 100％width =300％ < / feGaussianBlur>< feOffset dx =0dy =0>< height =300％id =rablshadow4>< feGaussianBlur in =SourceAlphastdDeviation =2 < / feComponentTransfer>< feMerge>< feMergeNode>< / feMergeNode>< feMergeNode in =>< feComponentTransfer>< feFuncA type =linearslope =0>< / feFuncA>< SourceGraphic>< / feMergeNode>< / feMerge>< / filter>< filter x = - 100％y = - 100％width =300％height =300％ < / feGaussianBlur>< feOffset dx =0dy =0>< / feOffset>< feComponentTransfer>< < feFuncA type =linearslope =0.4>< / feFuncA>< / feComponentTransfer>< feMerge>< feMergeNode>< / feMergeNode>< feMergeNode in =SourceGraphic>< / feMergeNode>< / feMerge>< / filter>< filter x = - 100 ％y = - 100％width =300％height =300％id =rablshadow2>< feGaussianBlur in =SourceAlphastdDeviation =1>< / feGaussianBlur>< feOffset dx =0dy =2>< / feOffset>< feComponentTransfer>< feMuncge>< feFuncA type =linearslope =0.2>< / feFuncA>< / feComponentTransfer>< feMerge> ;< feMergeNode>< / feMergeNode>< feMergeNode in =SourceGraphic>< / feMergeNode>< / feMerge>< / filter>< filter x = - 100％y = - 100 ％width =300％height =300％id =rablshadow1>< feGaussianBlur in =SourceAlphastdDeviation =2>< / feGaussianBlur>< feOffset dx =0dy < / feComponentTransfer>< feMerge>< feMergeNode>< / feComponentTransfer>< feFuncA type =linearslope =0.4>< / feFuncA>< / feMergeNode>< feMergeNode in =SourceGraphic>< / feMergeNode>< / feMerge>< / filter>< filter x = - 100％width =300％ height =300％id =rablshadow0>< feGaussianBlur in = SourceAlphastdDeviation =0>< / feGaussianBlur>< feOffset dx =0dy =1>< / feOffset>< feComponentTransfer>< feFuncA type =linear < / feMergeNode>< / feMerge>< / feMergeNode>< / feComponentTransfer>< feMerge>< feMergeNode>< / feMergeNode>< feMergeNode in =SourceGraphic< / feMerge>过滤器>< clipPath id =rablclip0>< rect x =13.5y =62.5width =563height =285>< / rect>< / clipPath><在下面的例子中，在下面的例子中，我们将描述如下：
setTimeout 函数，如下例所示：
函数doSetTimeOutDrawChart（图表，数据，选项，延迟）{
setTimeout（function（）{
chart.draw（data，选项）;
}，延迟）;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {
packages: ['bar']
});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
/*SCAN TIME*/
var data = new google.visualization.arrayToDataTable([<%=JSONScanTimeArray%>]);
console.log(data);
var options = {
width: 750,
height: 400,
chart: {
title: 'SCAN TIME',
}};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
console.log(chart);
chart.draw(data, options);
/*IMAGE ARTIFACTS*/
var data2 = new google.visualization.arrayToDataTable([<%=JSONIQArray%>]);
console.log(data2);
var options2 = {
width: 750,
height: 400,
chart: {
title: 'IMAGE QUALITY',
}};
var chart2 = new google.charts.Bar(document.getElementById('chart_div2'));
console.log(chart2);
chart2.draw(data2, options2);
}
</script>
<div>
<div id="chart_div" style="display:inline-block;margin:10px;"></div>
...
<div id="chart_div2" style="display:inline-block;margin:10px;"></div>
</div>
innerHTML: "<div style="position: relative; width: 750px; height: 400px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg width="750" height="400"><defs></defs></svg></div></div>"
innerHTML: "<div style="position: relative; width: 750px; height: 400px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg width="750" height="400"><defs><filter x="-100%" y="-100%" width="300%" height="300%" id="rablshadow4"><feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur><feOffset dx="0" dy="0"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><filter x="-100%" y="-100%" width="300%" height="300%" id="rablshadow3"><feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur><feOffset dx="0" dy="0"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.4"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><filter x="-100%" y="-100%" width="300%" height="300%" id="rablshadow2"><feGaussianBlur in="SourceAlpha" stdDeviation="1"></feGaussianBlur><feOffset dx="0" dy="2"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.2"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><filter x="-100%" y="-100%" width="300%" height="300%" id="rablshadow1"><feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur><feOffset dx="0" dy="1"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.4"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><filter x="-100%" y="-100%" width="300%" height="300%" id="rablshadow0"><feGaussianBlur in="SourceAlpha" stdDeviation="0"></feGaussianBlur><feOffset dx="0" dy="1"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.4"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><clipPath id="rablclip0"><rect x="13.5" y="62.5" width="563" height="285"></rect></clipPath></defs><g><rect x="0" y="0" width="750" height="400" fill="white" stroke="black" stroke-width="0"></rect><text x="0" y="15" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 16px;" fill="#757575" dx="0px">IMAGE QUALITY</text><rect x="616.96875" y="62.5" width="12" height="12" rx="2" ry="2" fill="#4285F4"></rect><text x="636.96875" y="75.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2;" fill="#757575" dx="0px">Image Quality</text><rect x="616.96875" y="95.5" width="12" height="12" rx="2" ry="2" fill="#DB4437"></rect><text x="636.96875" y="108.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2;" fill="#757575" dx="0px">Image Quality Ref</text><rect x="13.5" y="62.5" width="563" height="285" fill="none"></rect></g><g><line x1="13.5" x2="576.5" y1="347.5" y2="347.5" stroke="#9E9E9E" stroke-width="1"></line><line x1="13.5" x2="576.5" y1="290.5" y2="290.5" stroke="#E0E0E0" stroke-width="1"></line><line x1="13.5" x2="576.5" y1="233.5" y2="233.5" stroke="#E0E0E0" stroke-width="1"></line><line x1="13.5" x2="576.5" y1="176.5" y2="176.5" stroke="#E0E0E0" stroke-width="1"></line><line x1="13.5" x2="576.5" y1="119.5" y2="119.5" stroke="#E0E0E0" stroke-width="1"></line><line x1="13.5" x2="576.5" y1="62.5" y2="62.5" stroke="#E0E0E0" stroke-width="1"></line></g><g><path d="M 60.672043010752674 120 A 2 2 0 0 1 62.672043010752674 122 L 62.672043010752674 347 A 0 0 0 0 1 62.672043010752674 347 L 26 347 A 0 0 0 0 1 26 347 L 26 122 A 2 2 0 0 1 28 120 Z" fill="#4285F4" clip-path="url(#rablclip0)"></path><path d="M 98.34408602150535 63 A 2 2 0 0 1 100.34408602150535 65 L 100.34408602150535 347 A 0 0 0 0 1 100.34408602150535 347 L 63.672043010752674 347 A 0 0 0 0 1 63.672043010752674 347 L 63.672043010752674 65 A 2 2 0 0 1 65.67204301075267 63 Z" fill="#DB4437" clip-path="url(#rablclip0)"></path><path d="M 178.58602150537632 347.5 A 0 0 0 0 1 178.58602150537632 347.5 L 178.58602150537632 347.5 A 0 0 0 0 1 178.58602150537632 347.5 L 141.91397849462365 347.5 A 0 0 0 0 1 141.91397849462365 347.5 L 141.91397849462365 347.5 A 0 0 0 0 1 141.91397849462365 347.5 Z" fill="#4285F4" clip-path="url(#rablclip0)"></path><path d="M 214.25806451612902 63 A 2 2 0 0 1 216.25806451612902 65 L 216.25806451612902 347 A 0 0 0 0 1 216.25806451612902 347 L 179.58602150537632 347 A 0 0 0 0 1 179.58602150537632 347 L 179.58602150537632 65 A 2 2 0 0 1 181.58602150537632 63 Z" fill="#DB4437" clip-path="url(#rablclip0)"></path><path d="M 294.5 347.5 A 0 0 0 0 1 294.5 347.5 L 294.5 347.5 A 0 0 0 0 1 294.5 347.5 L 257.82795698924724 347.5 A 0 0 0 0 1 257.82795698924724 347.5 L 257.82795698924724 347.5 A 0 0 0 0 1 257.82795698924724 347.5 Z" fill="#4285F4" clip-path="url(#rablclip0)"></path><path d="M 330.1720430107527 63 A 2 2 0 0 1 332.1720430107527 65 L 332.1720430107527 347 A 0 0 0 0 1 332.1720430107527 347 L 295.5 347 A 0 0 0 0 1 295.5 347 L 295.5 65 A 2 2 0 0 1 297.5 63 Z" fill="#DB4437" clip-path="url(#rablclip0)"></path><path d="M 410.4139784946237 347.5 A 0 0 0 0 1 410.4139784946237 347.5 L 410.4139784946237 347.5 A 0 0 0 0 1 410.4139784946237 347.5 L 373.741935483871 347.5 A 0 0 0 0 1 373.741935483871 347.5 L 373.741935483871 347.5 A 0 0 0 0 1 373.741935483871 347.5 Z" fill="#4285F4" clip-path="url(#rablclip0)"></path><path d="M 446.0860215053763 63 A 2 2 0 0 1 448.0860215053763 65 L 448.0860215053763 347 A 0 0 0 0 1 448.0860215053763 347 L 411.4139784946237 347 A 0 0 0 0 1 411.4139784946237 347 L 411.4139784946237 65 A 2 2 0 0 1 413.4139784946237 63 Z" fill="#DB4437" clip-path="url(#rablclip0)"></path><path d="M 526.3279569892472 347.5 A 0 0 0 0 1 526.3279569892472 347.5 L 526.3279569892472 347.5 A 0 0 0 0 1 526.3279569892472 347.5 L 489.6559139784946 347.5 A 0 0 0 0 1 489.6559139784946 347.5 L 489.6559139784946 347.5 A 0 0 0 0 1 489.6559139784946 347.5 Z" fill="#4285F4" clip-path="url(#rablclip0)"></path><path d="M 564 347.5 A 0 0 0 0 1 564 347.5 L 564 347.5 A 0 0 0 0 1 564 347.5 L 527.3279569892472 347.5 A 0 0 0 0 1 527.3279569892472 347.5 L 527.3279569892472 347.5 A 0 0 0 0 1 527.3279569892472 347.5 Z" fill="#DB4437" clip-path="url(#rablclip0)"></path></g><g></g><g><text x="63.17204301075269" y="364.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-60.2958984375px">AX Pd FS PROPELLER</text><text x="295" y="364.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-64.8603515625px">SAG PD FS PROPELLER</text><text x="410.9139784946237" y="364.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-20.8857421875px">AX LOK</text><text x="526.8279569892472" y="364.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-23.6396484375px">Kai - 3-pl</text><text x="283.6914902553764" y="396.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#424242" dx="-27.0556640625px">Sequence</text><text x="7.5" y="351.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-6.9375px">0</text><text x="7.5" y="294.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-6.9375px">1</text><text x="7.5" y="237.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-6.9375px">2</text><text x="7.5" y="180.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-6.9375px">3</text><text x="7.5" y="123.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-6.9375px">4</text><text x="7.5" y="66.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-6.9375px">5</text></g><g></g><g></g><g></g></svg></div></div>"
setTimeout function like in this example: function doSetTimeOutDrawChart(chart, data, options, delay){
setTimeout(function () {
chart.draw(data, options);
}, delay);
}
