同一页面上的多个Google图表

Question

我正在尝试创建股票投资组合的POC 我正在使用谷歌图表来做到这一点 我想生成3个图表：每个股票一个（我有两个股票），两个股票都有一个 在我的HTML中我创建了三个div（使用一些guid）

<div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div>
<div id="2dea80b0fabd43bba019dbc3ddf342aa"></div>
<div id="linechart_material"></div>

我已经生成了一个应该填充div的javascript

    $(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
google.load('visualization', '1.1', { 'packages': ['line'] });

google.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');

data.addColumn('number', 'Company #4');
data.addColumn('number', 'Company #2');
data.addRow([new Date(2015, 11,  27), 12.7389789250395,4.10950499778125]);
data.addRow([new Date(2015, 11,  26), 6.76681987790708,8.38212726329552]);
data.addRow([new Date(2015, 11,  25), 15.7216755155109,4.36060299741132]);
data.addRow([new Date(2015, 11,  24), 7.44940381844035,3.34093286951116]);
data.addRow([new Date(2015, 11,  23), 9.02574470221333,10.0405249521325]);
data.addRow([new Date(2015, 11,  22), 11.9767397269498,5.29850781210629]);
data.addRow([new Date(2015, 11,  21), 14.5598888055235,6.3867255497662]);
data.addRow([new Date(2015, 11,  20), 12.2693184056642,3.70270192981823]);
data.addRow([new Date(2015, 11,  19), 8.29967047194935,17.0856299675469]);
data.addRow([new Date(2015, 11,  18), 12.9148372020176,4.37814835290338]);
var options = {
title: 'Stock Performance',
width: 900,
height: 500
};

var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);

var data0 = new google.visualization.DataTable();
data0.addColumn('date', 'Day');
data0.addColumn('number', 'Company #4');
data0.addRow([new Date(2015, 11,  27), 12.7389789250395]);
data0.addRow([new Date(2015, 11,  26), 6.76681987790708]);
data0.addRow([new Date(2015, 11,  25), 15.7216755155109]);
data0.addRow([new Date(2015, 11,  24), 7.44940381844035]);
data0.addRow([new Date(2015, 11,  23), 9.02574470221333]);
data0.addRow([new Date(2015, 11,  22), 11.9767397269498]);
data0.addRow([new Date(2015, 11,  21), 14.5598888055235]);
data0.addRow([new Date(2015, 11,  20), 12.2693184056642]);
data0.addRow([new Date(2015, 11,  19), 8.29967047194935]);
data0.addRow([new Date(2015, 11,  18), 12.9148372020176]);
var options0 = {
title: 'Stock Performance',
width: 300,
height: 300
};

var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8'));
chart0.draw(data0, options0);

var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Day');
data1.addColumn('number', 'Company #2');
data1.addRow([new Date(2015, 11,  27), 4.10950499778125]);
data1.addRow([new Date(2015, 11,  26), 8.38212726329552]);
data1.addRow([new Date(2015, 11,  25), 4.36060299741132]);
data1.addRow([new Date(2015, 11,  24), 3.34093286951116]);
data1.addRow([new Date(2015, 11,  23), 10.0405249521325]);
data1.addRow([new Date(2015, 11,  22), 5.29850781210629]);
data1.addRow([new Date(2015, 11,  21), 6.3867255497662]);
data1.addRow([new Date(2015, 11,  20), 3.70270192981823]);
data1.addRow([new Date(2015, 11,  19), 17.0856299675469]);
data1.addRow([new Date(2015, 11,  18), 4.37814835290338]);
var options1 = {
title: 'Stock Performance',
width: 300,
height: 300
};

var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa'));
chart1.draw(data1, options1);

}

问题是每次加载页面时，只会渲染三个图表中的一个。 （每次都不同）
有没有人遇到过这样的问题？

Answer 1

The same issue存储库中报告了

google-visualization-issues：

  

人们看到的多个实例的大小问题   应使用此新版本解决材料图表。您可以   将代码更改为加载＆＃34; 1.1＆＃34;现在让候选人释放时   变得可用，你将使用它。

目前至少有两种解决方案可用：

选项1.使用冻结的版本加载程序。

由于

  

推出可解决此问题的v43候选版本

切换到使用冻结的版本加载程序。

步骤：

1）添加对loader的引用：<script src="http://www.gstatic.com/charts/loader.js"></script>

2）然后加载43版本的库：google.charts.load("43",{packages:["line"]});

3）替换：

google.setOnLoadCallback(drawChart);

与

google.charts.setOnLoadCallback(drawChart);

示例

＆＃13;

＆＃13;

google.charts.load("43",{packages:["line"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');

data.addColumn('number', 'Company #4');
data.addColumn('number', 'Company #2');
data.addRow([new Date(2015, 11,  27), 12.7389789250395,4.10950499778125]);
data.addRow([new Date(2015, 11,  26), 6.76681987790708,8.38212726329552]);
data.addRow([new Date(2015, 11,  25), 15.7216755155109,4.36060299741132]);
data.addRow([new Date(2015, 11,  24), 7.44940381844035,3.34093286951116]);
data.addRow([new Date(2015, 11,  23), 9.02574470221333,10.0405249521325]);
data.addRow([new Date(2015, 11,  22), 11.9767397269498,5.29850781210629]);
data.addRow([new Date(2015, 11,  21), 14.5598888055235,6.3867255497662]);
data.addRow([new Date(2015, 11,  20), 12.2693184056642,3.70270192981823]);
data.addRow([new Date(2015, 11,  19), 8.29967047194935,17.0856299675469]);
data.addRow([new Date(2015, 11,  18), 12.9148372020176,4.37814835290338]);
var options = {
title: 'Stock Performance',
width: 900,
height: 500
};

var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);

var data0 = new google.visualization.DataTable();
data0.addColumn('date', 'Day');
data0.addColumn('number', 'Company #4');
data0.addRow([new Date(2015, 11,  27), 12.7389789250395]);
data0.addRow([new Date(2015, 11,  26), 6.76681987790708]);
data0.addRow([new Date(2015, 11,  25), 15.7216755155109]);
data0.addRow([new Date(2015, 11,  24), 7.44940381844035]);
data0.addRow([new Date(2015, 11,  23), 9.02574470221333]);
data0.addRow([new Date(2015, 11,  22), 11.9767397269498]);
data0.addRow([new Date(2015, 11,  21), 14.5598888055235]);
data0.addRow([new Date(2015, 11,  20), 12.2693184056642]);
data0.addRow([new Date(2015, 11,  19), 8.29967047194935]);
data0.addRow([new Date(2015, 11,  18), 12.9148372020176]);
var options0 = {
title: 'Stock Performance',
width: 300,
height: 300
};

var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8'));
chart0.draw(data0, options0);

var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Day');
data1.addColumn('number', 'Company #2');
data1.addRow([new Date(2015, 11,  27), 4.10950499778125]);
data1.addRow([new Date(2015, 11,  26), 8.38212726329552]);
data1.addRow([new Date(2015, 11,  25), 4.36060299741132]);
data1.addRow([new Date(2015, 11,  24), 3.34093286951116]);
data1.addRow([new Date(2015, 11,  23), 10.0405249521325]);
data1.addRow([new Date(2015, 11,  22), 5.29850781210629]);
data1.addRow([new Date(2015, 11,  21), 6.3867255497662]);
data1.addRow([new Date(2015, 11,  20), 3.70270192981823]);
data1.addRow([new Date(2015, 11,  19), 17.0856299675469]);
data1.addRow([new Date(2015, 11,  18), 4.37814835290338]);
var options1 = {
title: 'Stock Performance',
width: 300,
height: 300
};

var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa'));
chart1.draw(data1, options1);

}

＆＃13;

<script src="http://www.google.com/jsapi"></script>
<script src="http://www.gstatic.com/charts/loader.js"></script>
<div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div>
<div id="2dea80b0fabd43bba019dbc3ddf342aa"></div>
<div id="linechart_material"></div>

＆＃13;

＆＃13;

＆＃13;

选项2.同步渲染图表

由于draw函数是异步的，我们利用ready事件处理程序按顺序绘制图表，在这种情况下，应该正确呈现多个图表，如下所示。

示例

＆＃13;

＆＃13;

google.load('visualization', '1.1', { 'packages': ['line'] });
google.setOnLoadCallback(drawChart);


function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');

data.addColumn('number', 'Company #4');
data.addColumn('number', 'Company #2');
data.addRow([new Date(2015, 11,  27), 12.7389789250395,4.10950499778125]);
data.addRow([new Date(2015, 11,  26), 6.76681987790708,8.38212726329552]);
data.addRow([new Date(2015, 11,  25), 15.7216755155109,4.36060299741132]);
data.addRow([new Date(2015, 11,  24), 7.44940381844035,3.34093286951116]);
data.addRow([new Date(2015, 11,  23), 9.02574470221333,10.0405249521325]);
data.addRow([new Date(2015, 11,  22), 11.9767397269498,5.29850781210629]);
data.addRow([new Date(2015, 11,  21), 14.5598888055235,6.3867255497662]);
data.addRow([new Date(2015, 11,  20), 12.2693184056642,3.70270192981823]);
data.addRow([new Date(2015, 11,  19), 8.29967047194935,17.0856299675469]);
data.addRow([new Date(2015, 11,  18), 12.9148372020176,4.37814835290338]);
var options = {
title: 'Stock Performance',
width: 900,
height: 500
};


var data0 = new google.visualization.DataTable();
data0.addColumn('date', 'Day');
data0.addColumn('number', 'Company #4');
data0.addRow([new Date(2015, 11,  27), 12.7389789250395]);
data0.addRow([new Date(2015, 11,  26), 6.76681987790708]);
data0.addRow([new Date(2015, 11,  25), 15.7216755155109]);
data0.addRow([new Date(2015, 11,  24), 7.44940381844035]);
data0.addRow([new Date(2015, 11,  23), 9.02574470221333]);
data0.addRow([new Date(2015, 11,  22), 11.9767397269498]);
data0.addRow([new Date(2015, 11,  21), 14.5598888055235]);
data0.addRow([new Date(2015, 11,  20), 12.2693184056642]);
data0.addRow([new Date(2015, 11,  19), 8.29967047194935]);
data0.addRow([new Date(2015, 11,  18), 12.9148372020176]);
var options0 = {
title: 'Stock Performance',
width: 300,
height: 300
};


var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Day');
data1.addColumn('number', 'Company #2');
data1.addRow([new Date(2015, 11,  27), 4.10950499778125]);
data1.addRow([new Date(2015, 11,  26), 8.38212726329552]);
data1.addRow([new Date(2015, 11,  25), 4.36060299741132]);
data1.addRow([new Date(2015, 11,  24), 3.34093286951116]);
data1.addRow([new Date(2015, 11,  23), 10.0405249521325]);
data1.addRow([new Date(2015, 11,  22), 5.29850781210629]);
data1.addRow([new Date(2015, 11,  21), 6.3867255497662]);
data1.addRow([new Date(2015, 11,  20), 3.70270192981823]);
data1.addRow([new Date(2015, 11,  19), 17.0856299675469]);
data1.addRow([new Date(2015, 11,  18), 4.37814835290338]);
var options1 = {
title: 'Stock Performance',
width: 300,
height: 300
};

var chart = new google.charts.Line(document.getElementById('linechart_material'));
google.visualization.events.addOneTimeListener(chart, 'ready', function(){
     
     var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8'));
     google.visualization.events.addOneTimeListener(chart0, 'ready', function(){
         var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa'));
         chart1.draw(data1, options1);
     });    
     chart0.draw(data0, options0);

});
chart.draw(data, options);

}

＆＃13;

<script src="http://www.google.com/jsapi"></script>
<div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div>
<div id="2dea80b0fabd43bba019dbc3ddf342aa"></div>
<div id="linechart_material"></div>

＆＃13;

＆＃13;

＆＃13;