gpt4 book ai didi

javascript - Google Charts 第二个数据覆盖第一个数据和图表

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:28:32 26 4
gpt4 key购买 nike

我试图用两个不同的数据源显示两个不同的图表。我的第二个函数 drawChart3() 覆盖了第一个图表及其数据源。我试过添加一个时间监听器来缓解,但我没有成功。我对 javascript 很陌生,所以我很感激任何关于我的错误可能存在的提示。谢谢

<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawChart3);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.

function drawChart() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1ODIBoKW3H9bLNR2RnyfEqd9c0fzWaql1FfRp_JCWCyY/edit#gid=0');
query.setQuery('select *');
query.send(handleQueryResponse);
}
function drawChart3() {
var query3 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1yiNn3oQYYK4Z1aCl5R2pGqFcZLU66uFA1tqW69sGrOg/edit#gid=0');
query3.setQuery('select *');
query3.send(handleQueryResponse);
}
//Set chart options
var options = {'title': '^VIX Close & XX Correlation Coefficient',
'legend': {position: 'none'},
'width': 600,
'height': 300};

//Set chart options
var options3 = {'title': 'Search Queries: "XX", "Algorithmic Trading", "Trading", "Options"',
'legend': 'bottom',
chartArea:{left:60,top:50,width:'98%',height:'75%'},
'width': 1300,
'height': 500};

function handleQueryResponse(response) {
var data = response.getDataTable();
var chart = new google.visualization.AreaChart(document.getElementById('chart-container'));
google.visualization.events.addOneTimeListener(chart, 'ready', function() {
var chart3 = new google.visualization.AreaChart(document.getElementById('chart3-container'));
var data3 = response.getDataTable();
chart3.draw(data3, options3);
});
chart.draw(data, options);
}
</script>
</head>

<body>

<td><div id="chart-container" style="border: 1px solid #ccc"></div></td>
<td><div id="chart3-container" style="border: 1px solid #ccc"></div></td>
</body>
</html>

最佳答案

发生的事情是你每次都写下对两个图表的回应。我只是重写了您的函数以接收一个 ID,这样它们就不会相互覆盖。写得不好,但我认为这会做你想要的。

<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawCharts);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.

function drawCharts() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1ODIBoKW3H9bLNR2RnyfEqd9c0fzWaql1FfRp_JCWCyY/edit#gid=0');
query.setQuery('select *');
var query3 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1yiNn3oQYYK4Z1aCl5R2pGqFcZLU66uFA1tqW69sGrOg/edit#gid=0');
query3.setQuery('select *');
runQuery(query, 'chart-container')
runQuery(query3, 'chart3-container')
}

//Set chart options
var options = {'title': '^VIX Close & XX Correlation Coefficient',
'legend': {position: 'none'},
'width': 600,
'height': 300};

//Set chart options
var options3 = {'title': 'Search Queries: "XX", "Algorithmic Trading", "Trading", "Options"',
'legend': 'bottom',
chartArea:{left:60,top:50,width:'98%',height:'75%'},
'width': 1300,
'height': 500};

function runQuery(q, chartId) {
q.send( function(response){
var data = response.getDataTable();
var chart = new google.visualization.AreaChart(document.getElementById(chartId));
chart.draw(data, options);
});
}
</script>
</head>

<body>

<td><div id="chart-container" style="border: 1px solid #ccc"></div></td>
<td><div id="chart3-container" style="border: 1px solid #ccc"></div></td>
</body>
</html>

关于javascript - Google Charts 第二个数据覆盖第一个数据和图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37011029/

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