能否点击后隐藏一个图表然后显示另一个图表
时间: 2023-12-03 11:46:58 浏览: 32
是的,你可以使用JavaScript来实现点击隐藏一个图表并显示另一个图表。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>图表切换示例</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.28.3/dist/apexcharts.min.js"></script>
</head>
<body>
<div id="chart1"></div>
<div id="chart2" style="display:none;"></div>
<button onclick="toggleCharts()">切换图表</button>
<script>
var chart1 = new ApexCharts(document.querySelector("#chart1"), {
series: [{
name: 'Series 1',
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
}],
chart: {
height: 350,
type: 'line',
},
stroke: {
width: 7,
curve: 'smooth'
},
xaxis: {
type: 'datetime',
categories: ["2021-01-01", "2021-01-02", "2021-01-03", "2021-01-04", "2021-01-05", "2021-01-06", "2021-01-07", "2021-01-08", "2021-01-09"],
},
title: {
text: 'Chart 1',
align: 'center'
},
});
var chart2 = new ApexCharts(document.querySelector("#chart2"), {
series: [{
name: 'Series 1',
data: [10, 20, 30, 40, 50, 60, 70, 80, 90]
}],
chart: {
height: 350,
type: 'line',
},
stroke: {
width: 7,
curve: 'smooth'
},
xaxis: {
type: 'datetime',
categories: ["2021-01-01", "2021-01-02", "2021-01-03", "2021-01-04", "2021-01-05", "2021-01-06", "2021-01-07", "2021-01-08", "2021-01-09"],
},
title: {
text: 'Chart 2',
align: 'center'
},
});
chart1.render();
chart2.render();
function toggleCharts() {
var chart1Div = document.getElementById("chart1");
var chart2Div = document.getElementById("chart2");
if (chart1Div.style.display === "none") {
chart1Div.style.display = "block";
chart2Div.style.display = "none";
} else {
chart1Div.style.display = "none";
chart2Div.style.display = "block";
}
}
</script>
</body>
</html>
```
在这个例子中,我们定义了两个图表(`chart1`和`chart2`),并且在页面中只显示了`chart1`,`chart2`的样式设置为`display:none`,这意味着它默认是隐藏的。我们还定义了一个按钮,当点击时,将调用`toggleCharts()`函数,该函数切换图表的可见性。
在`toggleCharts()`函数中,我们首先获取`chart1`和`chart2`的`div`元素,然后检查`chart1`的可见性。如果它被隐藏了,则将其显示,并将`chart2`隐藏。如果它是可见的,则将其隐藏,并将`chart2`显示。
这样就可以实现点击隐藏一个图表并显示另一个图表的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)