gpt4 book ai didi

javascript - Google Charts API - 页面上仅呈现一张图表和两张图表

转载 作者:行者123 更新时间:2023-12-03 04:05:10 25 4
gpt4 key购买 nike

我正在尝试在一个页面中包含 2 个图表。一种是折线图,另一种是散点图。我遵循 Google Charts 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>

最佳答案

看来chart.draw函数一次只能调用一个,但由于它是异步的,它会立即返回并尝试立即调用第二个函数。答案是使用google.visualization.events.addOneTimeListener()在第一个chart.draw之后调用第二个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>

关于javascript - Google Charts API - 页面上仅呈现一张图表和两张图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44592588/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com