Javascript GoogleCharts API-页面上仅呈现一个图表和两个图表

我试图在一页中包含两个图表。一个是折线图，另一个是散点图。我遵循了GoogleCharts的API指南，使用一个回调函数在一个页面上实现多个图表，但是在任何给定的时间，只有一个图表会出现。真正奇怪的是，Safari上显示的是左侧的折线图，而Chrome上显示的是右侧的散点图

head部分中图表创建的代码如下所示

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script>
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var dataLine = google.visualization.arrayToDataTable([
      ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
      ['15:00', 728, 1065, 112, 73 , 12, 134],
      ['16:00', 943, 1056, 122, 112 , 9, 116],
      ['17:00', 1280, 1069, 156, 99 , 26, 196],
      ['18:00', 1276, 1277, 154, 134 , 9, 204],
      ['19:00', 1235, 984, 84, 109 , 10, 134],
      ['20:00', 1133, 1028, 83, 74 , 20, 73],
      ['21:00', 938, 1018, 191, 49 , 33, 66],
      ['22:00', 1038, 952, 163, 72 , 27, 79],
      ['23:00', 851, 807, 156, 57 , 11, 79],
      ['00:00', 390, 455, 89, 24 , 9, 41],
      ['01:00', 195, 270, 13, 13 , 5, 13],
      ['02:00', 92, 140, 18, 2 , 0, 7],
      ['03:00', 86, 73, 7, 2 , 1, 2],
      ['04:00', 136, 49, 8, 3 , 1, 8],
      ['05:00', 99, 86, 10, 3 , 0, 5],
      ['06:00', 230, 200, 15, 8 , 5, 12],
      ['07:00', 531, 461, 49, 39 , 4, 40],
      ['08:00', 605, 683, 152, 67 , 13, 96],
      ['09:00', 528, 800, 111, 78 , 17, 53],
      ['10:00', 716, 885, 75, 68 , 14, 76],
      ['11:00', 1102, 768, 66, 50 , 15, 46],
      ['12:00', 1015, 695, 41, 47 , 18, 49],
      ['13:00', 856, 624, 52, 95 , 18, 73],
      ['14:00', 779, 524, 32, 30 , 21, 70]
    ]);

    var optionsLine = {
      title: '',
      curveType: 'function',
      legend: { position: 'bottom' },
      colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
      theme: 'material',
      vAxis: {
      viewWindow: {
        min: 0
      }
    },
    };

    var dataScatter = google.visualization.arrayToDataTable([
      ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
      ['15:00', 0.158333, 0.186111, 0.191667, 0.0708333 , 0.1625, 0.202827],
      ['16:00', 0.0194444, 0.155417, 0.199306, 0.183333 , 0.5, 0.15],
      ['17:00', 0.147917, 0.161146, 0.227083, 0.154861 , 0.120833, 0.178393],
      ['18:00', -0.003125, 0.151515, 0.123214, 0.234524 , 0.388333, 0.228571],
      ['19:00', 0.125, 0.179762, 0.116667, 0.207292 , -0.075, 0.207143],
      ['20:00', 0.125, 0.183333, 0.171591, 0.179167 , 0.45, 0.114881],
      ['21:00', 0.110795, 0.2, 0.200379, 0.15625 , 0.18925, 0.198611],
      ['22:00', 0.105787, 0.175, 0.233333, 0.179167 , 0.0171131, 0.1625],
      ['23:00', 0.0146465, 0.183333, 0.159091, 0 , 0.0680556, 0.202313],
      ['00:00', 0.0675, 0.176736, 0.113021, 0.166667 , 0.350758, 0.187946],
      ['01:00', 0.0162698, 0.158333, 0.251711, -0.227778 , -0.3625, 0.0964286],
      ['02:00', 0.145, 0.215625, 0.24375, -0.0729167 , 0, 0.447619],
      ['03:00', 0.145509, 0.22128, 0.159091, 0 , -0.2, 0],
      ['04:00', 0.104167, 0.158333, 0.16875, 0.35 , 0, 0.111111],
      ['05:00', 0.0127946, 0.05, -0.426042, 0.325 , 0, 0.0638889],
      ['06:00', 0.146875, 0.0708333, -0.221429, 0.05 , 0, 0.273214],
      ['07:00', 0.1125, 0.184722, -0.0253472, 0.258333 , -0.35, 0.161354],
      ['08:00', 0.133333, 0.190972, 0.141667, 0.244048 , 0.358929, 0.186458],
      ['09:00', 0.128355, 0.188988, 0.13, 0.181061 , 0.0425, 0.257552],
      ['10:00', 0.1, 0.196875, 0.147112, -0.0464286 , -0.161458, 0.26875],
      ['11:00', 0.136364, 0.174826, 0.285714, 0.290476 , 0.31875, 0.275],
      ['12:00', -0.00357143, 0.172222, 0.199657, 0.1625 , 0.215, 0.159375],
      ['13:00', -0.1, 0.2, 0.195312, 0.0791667 , -0.246296, 0.183333],
      ['14:00', -0.00357143, 0.180303, 0.11125, 0.35 , 0.0081229, 0.19881]
    ]);

    var optionsScatter = {
      title: '',
      vAxis: { minValue: -1.0, maxValue: 1.0},
      colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
      theme: 'material',
      legend: {position: 'bottom'}
    };


var chartLine = new google.visualization.LineChart(document.getElementById('chart_1'));

chartLine.draw(dataLine, optionsLine);

var chartScatter = new google.visualization.ScatterChart(document.getElementById('chart_2'));

chartScatter.draw(dataScatter, optionsScatter);
}
</script>

load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var dataLine=google.visualization.arrayToDataTable([
[“小时”，“示例”，“示例1”，“示例2”，“示例3”，“示例4”，“示例5']，
['15:00', 728, 1065, 112, 73 , 12, 134],
['16:00', 943, 1056, 122, 112 , 9, 116],
['17:00', 1280, 1069, 156, 99 , 26, 196],
['18:00', 1276, 1277, 154, 134 , 9, 204],
['19:00', 1235, 984, 84, 109 , 10, 134],
['20:00', 1133, 1028, 83, 74 , 20, 73],
['21:00', 938, 1018, 191, 49 , 33, 66],
['22:00', 1038, 952, 163, 72 , 27, 79],
['23:00', 851, 807, 156, 57 , 11, 79],
['00:00', 390, 455, 89, 24 , 9, 41],
['01:00', 195, 270, 13, 13 , 5, 13],
['02:00', 92, 140, 18, 2 , 0, 7],
['03:00', 86, 73, 7, 2 , 1, 2],
['04:00', 136, 49, 8, 3 , 1, 8],
['05:00', 99, 86, 10, 3 , 0, 5],
['06:00', 230, 200, 15, 8 , 5, 12],
['07:00', 531, 461, 49, 39 , 4, 40],
['08:00', 605, 683, 152, 67 , 13, 96],
['09:00', 528, 800, 111, 78 , 17, 53],
['10:00', 716, 885, 75, 68 , 14, 76],
['11:00', 1102, 768, 66, 50 , 15, 46],
['12:00', 1015, 695, 41, 47 , 18, 49],
['13:00', 856, 624, 52, 95 , 18, 73],
['14:00', 779, 524, 32, 30 , 21, 70]
]);
var选项行={
标题：“”，
curveType:'函数'，
图例：{位置：'bottom'}，
颜色：[“00539f”、“e4003b”、“faa01a”、“FFEB3B3B”、“19283e”、“00539f”]，
主题:"材料",，
言辞：{
视图窗口：{
最低：0
}
},
};
var dataScatter=google.visualization.arrayToDataTable([
[“小时”，“示例”，“示例1”，“示例2”，“示例3”，“示例4”，“示例5']，
['15:00', 0.158333, 0.186111, 0.191667, 0.0708333 , 0.1625, 0.202827],
['16:00', 0.0194444, 0.155417, 0.199306, 0.183333 , 0.5, 0.15],
['17:00', 0.147917, 0.161146, 0.227083, 0.154861 , 0.120833, 0.178393],
['18:00', -0.003125, 0.151515, 0.123214, 0.234524 , 0.388333, 0.228571],
['19:00', 0.125, 0.179762, 0.116667, 0.207292 , -0.075, 0.207143],
['20:00', 0.125, 0.183333, 0.171591, 0.179167 , 0.45, 0.114881],
['21:00', 0.110795, 0.2, 0.200379, 0.15625 , 0.18925, 0.198611],
['22:00', 0.105787, 0.175, 0.233333, 0.179167 , 0.0171131, 0.1625],
['23:00', 0.0146465, 0.183333, 0.159091, 0 , 0.0680556, 0.202313],
['00:00', 0.0675, 0.176736, 0.113021, 0.166667 , 0.350758, 0.187946],
['01:00', 0.0162698, 0.158333, 0.251711, -0.227778 , -0.3625, 0.0964286],
['02:00', 0.145, 0.215625, 0.24375, -0.0729167 , 0, 0.447619],
['03:00', 0.145509, 0.22128, 0.159091, 0 , -0.2, 0],
['04:00', 0.104167, 0.158333, 0.16875, 0.35 , 0, 0.111111],
['05:00', 0.0127946, 0.05, -0.426042, 0.325 , 0, 0.0638889],
['06:00', 0.146875, 0.0708333, -0.221429, 0.05 , 0, 0.273214],
['07:00', 0.1125, 0.184722, -0.0253472, 0.258333 , -0.35, 0.161354],
['08:00', 0.133333, 0.190972, 0.141667, 0.244048 , 0.358929, 0.186458],
['09:00', 0.128355, 0.188988, 0.13, 0.181061 , 0.0425, 0.257552],
['10:00', 0.1, 0.196875, 0.147112, -0.0464286 , -0.161458, 0.26875],
['11:00', 0.136364, 0.174826, 0.285714, 0.290476 , 0.31875, 0.275],
['12:00', -0.00357143, 0.172222, 0.199657, 0.1625 , 0.215, 0.159375],
['13:00', -0.1, 0.2, 0.195312, 0.0791667 , -0.246296, 0.183333],
['14:00', -0.00357143, 0.180303, 0.11125, 0.35 , 0.0081229, 0.19881]
]);
var期权分散={
标题：“”，
变量：{minValue:-1.0，maxValue:1.0}，
颜色：[“00539f”、“e4003b”、“faa01a”、“FFEB3B3B”、“19283e”、“00539f”]，
主题:"材料",，
图例：{位置：'bottom'}
};
var chartLine=new google.visualization.LineChart（document.getElementById（'chart_1'）；
绘制图表线（数据线、选项线）；
var chartScatter=new google.visualization.ScatterChart（document.getElementById（'chart_2'））；
chartScatter.draw（数据散射，选项散射）；
}

一次只能调用一个chart.draw函数，但由于它是异步的，因此会立即返回，并尝试直接调用第二个函数。答案是使用

google.visualization.events.addOneTimeListener（）

调用第一个之后的第二个chart.draw

完成代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {packages:["corechart","scatter"]});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var dataLine = google.visualization.arrayToDataTable([
      ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
      ['21:00', 938, 1018, 191, 49 , 33, 66],
      ['22:00', 1038, 952, 163, 72 , 27, 79],
      ['23:00', 851, 807, 156, 57 , 11, 79],
      ['00:00', 390, 455, 89, 24 , 9, 41],
      ['01:00', 195, 270, 13, 13 , 5, 13],
      ['02:00', 92, 140, 18, 2 , 0, 7],
      ['03:00', 86, 73, 7, 2 , 1, 2],
      ['04:00', 136, 49, 8, 3 , 1, 8],
      ['05:00', 99, 86, 10, 3 , 0, 5],
      ['06:00', 230, 200, 15, 8 , 5, 12],
      ['07:00', 531, 461, 49, 39 , 4, 40],
      ['08:00', 605, 683, 152, 67 , 13, 96],
      ['09:00', 528, 800, 111, 78 , 17, 53],
      ['10:00', 716, 885, 75, 68 , 14, 76],
      ['11:00', 1102, 768, 66, 50 , 15, 46],
      ['12:00', 1015, 695, 41, 47 , 18, 49],
      ['13:00', 856, 624, 52, 95 , 18, 73],
      ['14:00', 779, 524, 32, 30 , 21, 70],
      ['15:00', 587, 533, 30, 161 , 19, 46],
      ['16:00', 580, 566, 59, 78 , 13, 56],
      ['17:00', 1041, 658, 23, 67 , 13, 39],
      ['18:00', 1835, 807, 22, 72 , 7, 65],
      ['19:00', 1603, 630, 35, 116 , 9, 126],
      ['20:00', 1898, 614, 26, 135 , 11, 110]
    ]);

    var optionsLine = {
      title: '',
      curveType: 'function',
      legend: { position: 'bottom' },
      colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
      theme: 'material',
      vAxis: {
      viewWindow: {
        min: 0
      }
    },
    };

    var dataScatter = google.visualization.arrayToDataTable([
      ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
      ['21:00', 0.110795, 0.2, 0.200379, 0.15625 , 0.18925, 0.198611],
      ['22:00', 0.105787, 0.175, 0.233333, 0.179167 , 0.0171131, 0.1625],
      ['23:00', 0.0146465, 0.183333, 0.159091, 0 , 0.0680556, 0.202313],
      ['00:00', 0.0675, 0.176736, 0.113021, 0.166667 , 0.350758, 0.187946],
      ['01:00', 0.0162698, 0.158333, 0.251711, -0.227778 , -0.3625, 0.0964286],
      ['02:00', 0.145, 0.215625, 0.24375, -0.0729167 , 0, 0.447619],
      ['03:00', 0.145509, 0.22128, 0.159091, 0 , -0.2, 0],
      ['04:00', 0.104167, 0.158333, 0.16875, 0.35 , 0, 0.111111],
      ['05:00', 0.0127946, 0.05, -0.426042, 0.325 , 0, 0.0638889],
      ['06:00', 0.146875, 0.0708333, -0.221429, 0.05 , 0, 0.273214],
      ['07:00', 0.1125, 0.184722, -0.0253472, 0.258333 , -0.35, 0.161354],
      ['08:00', 0.133333, 0.190972, 0.141667, 0.244048 , 0.358929, 0.186458],
      ['09:00', 0.128355, 0.188988, 0.13, 0.181061 , 0.0425, 0.257552],
      ['10:00', 0.1, 0.196875, 0.147112, -0.0464286 , -0.161458, 0.26875],
      ['11:00', 0.136364, 0.174826, 0.285714, 0.290476 , 0.31875, 0.275],
      ['12:00', -0.00357143, 0.172222, 0.199657, 0.1625 , 0.215, 0.159375],
      ['13:00', -0.1, 0.2, 0.195312, 0.0791667 , -0.246296, 0.183333],
      ['14:00', -0.00357143, 0.180303, 0.11125, 0.35 , 0.0081229, 0.19881],
      ['15:00', 0.1375, 0.180556, 0.0840909, 0.183333 , -0.01875, 0.0875],
      ['16:00', 0.131548, 0.19375, -0.25, 0.175 , 0.189286, 0.0375],
      ['17:00', 0.118182, 0.146429, 0.0878472, 0.325 , 0.199107, 0.205],
      ['18:00', 0.1, 0.165057, 0.338542, 0.0277778 , -0.1125, 0.275],
      ['19:00', -0.00793651, 0.0125654, 0.119444, 0.266667 , 0.0309722, 0.3],
      ['20:00', -0.0166667, 0.196044, 0.239583, 0.373295 , 0.00625, 0.4375]
    ]);

    var optionsScatter = {
      title: '',
      vAxis: { minValue: -1.0, maxValue: 1.0},
      colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
      theme: 'material',
      legend: {position: 'bottom'}
    };


    var chartScatter = new google.visualization.ScatterChart(document.getElementById('chart_2'));

    google.visualization.events.addOneTimeListener(chartScatter, 'ready', function(){
         //render chart2 once chart1 is rendered
         var chartLine = new google.visualization.LineChart(document.getElementById('chart_1'));

         chartLine.draw(dataLine, optionsLine);
    });


    chartScatter.draw(dataScatter, optionsScatter);

}
</script>

load（'current'，{packages:[“corechart”，“scatter”]}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var dataLine=google.visualization.arrayToDataTable([
[“小时”，“示例”，“示例1”，“示例2”，“示例3”，“示例4”，“示例5']，
['21:00', 938, 1018, 191, 49 , 33, 66],
['22:00', 1038, 952, 163, 72 , 27, 79],
['23:00', 851, 807, 156, 57 , 11, 79],
['00:00', 390, 455, 89, 24 , 9, 41],
['01:00', 195, 270, 13, 13 , 5, 13],
['02:00', 92, 140, 18, 2 , 0, 7],
['03:00', 86, 73, 7, 2 , 1, 2],
['04:00', 136, 49, 8, 3 , 1, 8],
['05:00', 99, 86, 10, 3 , 0, 5],
['06:00', 230, 200, 15, 8 , 5, 12],
['07:00', 531, 461, 49, 39 , 4, 40],
['08:00', 605, 683, 152, 67 , 13, 96],
['09:00', 528, 800, 111, 78 , 17, 53],
['10:00', 716, 885, 75, 68 , 14, 76],
['11:00', 1102, 768, 66, 50 , 15, 46],
['12:00', 1015, 695, 41, 47 , 18, 49],
['13:00', 856, 624, 52, 95 , 18, 73],