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

最新推荐文章于 2024-05-02 23:21:16 发布

DataGear

最新推荐文章于 2024-05-02 23:21:16 发布

阅读量671

点赞数

分类专栏： BI 数据可视化文章标签：数据可视化数据分析 echarts javascript html

本文链接：https://blog.csdn.net/datagear/article/details/128845445

版权

数据可视化同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

22 篇文章 0 订阅

订阅专栏

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>

效果图如下所示：
在这里插入图片描述

DataGear

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DataGear 制作可切换图表显示隐藏效果的数据可视化看板

DataGear的看板支持采用原生的HTML、JS、CSS技术编写，因而可以制作具有丰富交互效果的数据可视化看板。制作可切换图表显示隐藏效果的数据可视化看板，只需要编写简单的HTML、JS、Jquery代码，结合。本文的示例看板，点击下拉框指定的选项，仅显示与选项对应的图表，同时隐藏其他图表。
复制链接

扫一扫