DataGear 制作可切换图表显示隐藏效果的数据可视化看板

原创
2023/02/02 10:15
阅读数 2.8K

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>

效果图如下所示:

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部