我是 javascript 和 jquery 的新手。我正在使用 flot 绘制图表,其中有 2 个条形图...
我的第一个条形图
<div id="bar1" style="width:600px;height:300px;"></div>
$(function () {
var css_id = "#bar1";
var data = [
{label: 'foo',color:'red', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]},
{label: 'bar',color:'blue', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]},
{label: 'baz',color:'green', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]},
];
var options = {
series: {stack: 0,
lines: {show: false, steps: false },
bars: {show: true, barWidth: 0.4, align: 'center',},},
xaxis: {ticks: [[1,'One'], [2,'Two'], [3,'Three'], [4,'Four'], [5,'Five']]},
};
$.plot($(css_id), data, options);
});
我的第二张图表
<div id="bar2" style="width:600px;height:300px;"></div>
var data = [
{label: 'foo', color:'red', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]},
{label: 'bar', color:'blue', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]},
{label: 'baz', color:'yellow', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]},
];
$.plot($("#bar2"), data, {
series: {
stack: 1,
bars: {
show: true,
barWidth: 0.6,
fill:1
}
}
});
现在我有一个按钮的点击事件
$(document).ready(function() {
......
});
现在我应该在按钮事件的发生上写什么,以便我动态地从 <div id="bar1">
更改我的条形图至<div id="bar2">
最佳答案
如果我正确理解了这个问题,你想在按下按钮时隐藏/显示每个 div ....首先隐藏 <div>
之一使用style="display:none"
然后使用以下代码将两者切换为 click
一个按钮的
$(document).ready(function() {
$('#idofbutton').click(function() {
$('#bar1,#bar2').toggle();
});
});
使用toggle()
两者都隐藏当前显示的 div
并显示当前隐藏的div
(希望这是有道理的!)
关于javascript - 如何使用 javascript 动态更改显示不同的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9318310/