一个页面上有两个以上的 Google 图表？
[英]More than two Google Charts on a single page?
问题描述
我已经为这个问题苦苦挣扎了一段时间，似乎谷歌多年来对谷歌图表 API 做了很多小改动，这使得我更难找到答案为什么我的图表不工作。
我只是想在一个页面上显示两个以上相同的图表类型（条形图）。 就在今天，我找到了一个允许我一次显示 2 个图表的解决方案（链接：“ Google Charts 在第一个图表之后停止绘制”），但这只是一个小小的胜利，因为我真的需要超过 2 个图表来显示，而这个解决方案只是强制一个图形在另一个图形之前呈现。
这是我当前的代码：
Javascript
google.load('visualization', '1', {packages: ['corechart', 'line', 'bar']}); google.setOnLoadCallback(drawStuff); function drawStuff() { // Courses_Played Data var data = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["Ken McDonald", 10], ["ASU Karsten", 8], ["TPC Scotts...", 7], ["Ahwatukee", 3], ['Other', 3] ]); // Courses_played Options var options = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; // Course_Scores Data var data2 = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["TPC Scotts...", 81], ["ASU Karst...", 83], ["Ken McDonald", 87], ["Ahwatukee", 90], ]); //Course_Scores Options var options2 = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, vAxis:{ viewWindow:{ min:60 }}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; var chart = new google.charts.Bar(document.getElementById('Courses_Played')); google.visualization.events.addOneTimeListener(chart, 'ready', function(){ var chart2 = new google.charts.Bar(document.getElementById('Course_Scores')); // Convert the Classic options to Material options. chart2.draw(data2, google.charts.Bar.convertOptions(options2)); }); chart.draw(data, google.charts.Bar.convertOptions(options)); };
同样，此代码当前有效，但这只是因为我使用了仅适用于两个图表的解决方案。 问题似乎出在最后几行代码中，因为强制chart2 在第一个图表之前呈现是它工作的原因。 我只是不知道我需要做什么来允许三个或更多图表。 有没有办法强制任意数量的图表在另一个之前呈现？
4 个解决方案
解决方案1
1 2016-04-13 15:19:29
Google图表中的问题是，您只能调用一次google.charts.load（）。 因此，您需要在此单个函数调用中包含所有软件包，并从网页的开头调用它。
您可以包括多个这样的软件包：
<head><script type="text/javascript">
google.charts.load("current", {packages:["corechart","bar"]});
</script>
</head>
这解决了我的问题，并允许我在不更改任何代码的情况下在单个页面上显示多个图表。
要进行验证，请检查以下内容： https : //developers.google.com/chart/interactive/docs/basic_load_libs#basic-library-loading
解决方案2
0 2015-10-15 14:52:57
我认为您的当前版本存在问题，该版本存在问题。
您不必等待一个图表加载就可以加载另一个图表。
这是一个加载版本41 >所有3个图表绘制而无需等待另一个图表的示例。
google.charts.load('41', {packages: ['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { // Courses_Played Data var data = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["Ken McDonald", 10], ["ASU Karsten", 8], ["TPC Scotts...", 7], ["Ahwatukee", 3], ['Other', 3] ]); // Courses_played Options var options = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; // Courses_Played2014 Data var data3 = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["Ken McDonald", 14], ["ASU Karsten", 12], ["TPC Scotts...", 11], ["Ahwatukee", 7], ['Other', 7] ]); // Courses_played2014 Options var options3 = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; // Course_Scores Data var data2 = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["TPC Scotts...", 81], ["ASU Karst...", 83], ["Ken McDonald", 87], ["Ahwatukee", 90], ]); //Course_Scores Options var options2 = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, vAxis:{ viewWindow:{ min:60 }}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; var chart = new google.charts.Bar(document.getElementById('Courses_Played')); var chart2 = new google.charts.Bar(document.getElementById('Course_Scores')); var chart3 = new google.charts.Bar(document.getElementById('Courses_Played2014')); chart.draw(data, google.charts.Bar.convertOptions(options)); chart2.draw(data2, google.charts.Bar.convertOptions(options2)); chart3.draw(data3, google.charts.Bar.convertOptions(options3)); };
<script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://www.google.com/jsapi"></script> <div id="Courses_Played"></div> <div id="Courses_Played2014"></div> <div id="Course_Scores"></div>
解决方案3
0 2022-07-27 19:16:57
我正在使用 gviz_api python 模块加载数据。 如果有帮助：将 arrayToDataTable 更改为 DataTable
解决方案4
-1 2015-10-14 10:19:11
以下示例显示了如何在单个页面上呈现3 Google图表（类型为google.charts.Bar ）：
google.load('visualization', '1', { packages: ['corechart', 'line', 'bar'] }); google.setOnLoadCallback(drawCharts); function drawCharts() { var chartsData = [ { 'data': [ ['', 'Number of Rounds Played'], ["Ken McDonald", 10], ["ASU Karsten", 8], ["TPC Scotts...", 7], ["Ahwatukee", 3], ['Other', 3] ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Courses_Played' }, { 'data': [ ['', 'Number of Rounds Played'], ["TPC Scotts...", 81], ["ASU Karst...", 83], ["Ken McDonald", 87], ["Ahwatukee", 90], ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, vAxis: { viewWindow: { min: 60 } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Course_Scores' }, { 'data': [ ['', 'Number of Rounds Played in 2014'], ["Ken McDonald", 5], ["ASU Karsten", 4], ["TPC Scotts...", 7], ["Ahwatukee", 4], ['Other', 6] ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Courses_Played2014' }, ]; drawBarCharts(chartsData); }; function drawBarCharts(chartsData,index) { var curIndex = index || 0; var chartData = chartsData[curIndex]; var dataTable = new google.visualization.arrayToDataTable(chartData.data); var chart = new google.charts.Bar(document.getElementById(chartData.chartDivId)); google.visualization.events.addOneTimeListener(chart, 'ready', function () { if (curIndex < chartsData.length - 1) drawBarCharts(chartsData, curIndex + 1); }); chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options)); }
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="Courses_Played"></div> <div id="Courses_Played2014"></div> <div id="Course_Scores"></div>
或使用这种方式将图表动态插入页面中
google.load('visualization', '1', { packages: ['corechart', 'line', 'bar'] }); google.setOnLoadCallback(drawCharts); function drawCharts() { var chartsData = [ { 'data': [ ['', 'Number of Rounds Played'], ["Ken McDonald", 10], ["ASU Karsten", 8], ["TPC Scotts...", 7], ["Ahwatukee", 3], ['Other', 3] ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Courses_Played' }, { 'data': [ ['', 'Number of Rounds Played'], ["TPC Scotts...", 81], ["ASU Karst...", 83], ["Ken McDonald", 87], ["Ahwatukee", 90], ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, vAxis: { viewWindow: { min: 60 } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Course_Scores' }, { 'data': [ ['', 'Number of Rounds Played in 2014'], ["Ken McDonald", 5], ["ASU Karsten", 4], ["TPC Scotts...", 7], ["Ahwatukee", 4], ['Other', 6] ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Courses_Played2014' }, ]; drawBarCharts(chartsData); }; function drawBarCharts(chartsData,index) { var curIndex = index || 0; var chartData = chartsData[curIndex]; var dataTable = new google.visualization.arrayToDataTable(chartData.data); var chartDiv = document.createElement('div'); chartDiv.id = chartData.chartDivId; document.getElementById('chartContainer').appendChild(chartDiv); var chart = new google.charts.Bar(document.getElementById(chartDiv.id)); google.visualization.events.addOneTimeListener(chart, 'ready', function () { if (curIndex < chartsData.length - 1) drawBarCharts(chartsData, curIndex + 1); }); chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options)); }
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chartContainer"></div>
Google在一页上绘制两个条形图
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.