我需要有关HTML或JS代码的帮助。 我想创建一个下拉框,以便用户可以选择她/他想要绘制的系列。我的问题是,图表不会针对所选值自动加载。但是,当我选择另一个值时,将加载图表。只有这样,我才能选择默认的选定值来加载其相应的图表。 谢谢您的帮助。 这是我的HTML代码:
<body>
<div id="dashboar_div">
<select id="bx" onChange=drawDashboard(this)>
<option value="1" selected>TNDX</option>
<option value="2">EUR/TND</option>
</select>
</br>
<div id="chart_div"></div>
<div id="filter_div"></div>
</div>
</body>
<script type="text/javascript">
function drawDashboard(menu) {
var queryString = encodeURIComponent('search=échap texte&country=FR');
menu.value = document.getElementById("bx").value;
if (menu.value == '1') {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1XZ3-pipHXKJMEhsnOVRTWOMlKHcio_fzmUAE0LGQhUU/edit#gid=0' + queryString);
query.setQuery('select A, B');
query.send(handleSampleDataQueryResponse);
} else if (menu.value == '2') {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1XZ3-pipHXKJMEhsnOVRTWOMlKHcio_fzmUAE0LGQhUU/edit#gid=0' + queryString);
query.setQuery('select A, C');
query.send(handleSampleDataQueryResponse);
}
}
function handleSampleDataQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var data = response.getDataTable();
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
dashboard.draw(data);
}
</script>
答案 0 :(得分:0)
您需要有一个“请选择”或在页面加载时触发
window.addEventListener("load",function() {
drawDashboard(document.getElementById("bx"));
})
使用a请选择:
var queryString = encodeURIComponent('search=échap texte&country=FR');
function drawDashboard(menu) {
var menuValue = menu.value;
if (menuValue === "") return; // no selection
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XZ3-pipHXKJMEhsnOVRTWOMlKHcio_fzmUAE0LGQhUU/edit#gid=0' + queryString);
if (menuValue == '1') {
query.setQuery('select A, B');
} else if (menuValue == '2') {
query.setQuery('select A, C');
}
query.send(handleSampleDataQueryResponse);
}
function handleSampleDataQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var data = response.getDataTable();
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
dashboard.draw(data);
}
<div id="dashboar_div">
<select id="bx" onChange=drawDashboard(this)>
<option value="">Please select</option>
<option value="1">TNDX</option>
<option value="2">EUR/TND</option>
</select>
<br />
<div id="chart_div"></div>
<div id="filter_div"></div>
</div>
或在加载时触发选择
var queryString = encodeURIComponent('search=échap texte&country=FR');
function drawDashboard(menu) {
var menuValue = menu.value;
if (menuValue === "") return; // no selection
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XZ3-pipHXKJMEhsnOVRTWOMlKHcio_fzmUAE0LGQhUU/edit#gid=0' + queryString);
if (menuValue == '1') {
query.setQuery('select A, B');
} else if (menuValue == '2') {
query.setQuery('select A, C');
}
query.send(handleSampleDataQueryResponse);
}
function handleSampleDataQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var data = response.getDataTable();
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
dashboard.draw(data);
}
window.addEventListener("load",function() {
drawDashboard(document.getElementById("bx"));
})
<div id="dashboar_div">
<select id="bx" onChange=drawDashboard(this)>
<option value="1" selected>TNDX</option>
<option value="2">EUR/TND</option>
</select>
<br />
<div id="chart_div"></div>
<div id="filter_div"></div>
</div>