DataGear 的看板支持采用原生的HTML、JS、CSS技术编写，因而可以制作具有丰富交互效果的数据可视化看板。
制作可切换图表显示隐藏效果的数据可视化看板，只需要编写简单的HTML、JS、Jquery代码，结合chart.resize()函数调整图表尺寸即可。
本文的示例看板，点击下拉框指定的选项，仅显示与选项对应的图表，同时隐藏其他图表。
看板代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//显示ids中showIndex索引的图表，其他则隐藏
function toggleChart(ids, showIndex)
{
for(let i=0; i<ids.length; i++)
{
let id = ids[i];
let chart = dashboard.chartOf(id);
let chartEle = chart.elementJquery();
if(i == showIndex)
{
chartEle.show();
chart.resize();
}
else
chartEle.hide();
}
}
$(function()
{
var toggleChartEleIds = ["chart0", "chart1", "chart2"];
$("#toggleChartSelect").change(function()
{
let showIndex = parseInt($(this).val());
toggleChart(toggleChartEleIds, showIndex);
}).change();
});
</script>
</head>
<body dg-chart-auto-resize="true">
<h1 style="text-align:center;">
DataGear看板示例
</h1>
<div style="text-align:center;padding:1rem 0 2rem 0;font-size:2rem;">
<select id="toggleChartSelect" style="padding:0 3rem;font-size:2rem;">
<option value="0" selected="selected">图表-0</option>
<option value="1">图表-1</option>
<option value="2">图表-2</option>
</select>
</div>
<div style="height:300px;margin-top:100px;">
<div id="chart0" style="width:100%;height:100%;display:none;" dg-chart-widget="..."></div>
<div id="chart1" style="width:100%;height:100%;display:none;" dg-chart-widget="..."></div>
<div id="chart2" style="width:100%;height:100%;display:none;" dg-chart-widget="..."></div>
</div>
</body>
</html>
效果图如下所示：
