[英]Selecting one chart at a time using drop down list
我正在使用javascript和jqplot根据JSON文件中的数据绘制多个图表。 我已经能够做到这一点,但现在我想放一个下拉列表,该列表应与我的图表容器链接。 这意味着,选择特定选项将仅显示该容器的图表。 我的代码如下所示。 例如,当我选择“ area1”时,我只想显示“ chart1”。 谁能帮我实现这一目标。 我的代码还包含一个用于选择特定图表的js函数,但是当我选择area1时,所有图表都将隐藏,并且所有选项都一样。 我的代码如下:
JavaScript的:
$(function() {
$('select').change(function() {
var val = $(this).val();
if (val) {
$('div:not(#div' + val + ')').slideUp();
$('#div' + val).slideDown();
} else {
$('div').slideDown();
}
});
});
HTML代码:
<select>
<option value="">Select an Area</option>
<option value="1">Area1</option>
<option value="2">Area2</option>
<option value="3">Area3</option>
<option value="3">Area4</option>
<option value="3">Not Defined Area</option>
</select>
<div id="chart1" style="height: 400px; width: 600px;"></div>
<div id="chart2" style="height: 400px; width: 600px;"></div>
<div id="chart3" style="height: 400px; width: 600px;"></div>
<div id="chart4" style="height: 400px; width: 600px;"></div>
<div id="chart5" style="height: 400px; width: 600px;"></div>
您的代码应为
JavaScript的:
$(function() {
$('select').change(function() {
var val = $(this).val();
if (val!="") {
//change div with chart
$('div:not(#chart' + val + ')').slideUp();
//slide down selected one
$('#chart' + val).slideDown();
} else {
$('div').slideUp();
}
});
});
HTML代码:
<select>
<option value="">Select an Area</option>
<option value="1">Area1</option>
<option value="2">Area2</option>
<option value="3">Area3</option>
<option value="3">Area4</option>
<option value="3">Not Defined Area</option>
</select>
<div id="chart1" style="height: 400px; width: 600px;"></div>
<div id="chart2" style="height: 400px; width: 600px;"></div>
<div id="chart3" style="height: 400px; width: 600px;"></div>
<div id="chart4" style="height: 400px; width: 600px;"></div>
<div id="chart5" style="height: 400px; width: 600px;"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.