DataGear 制作自定义数据集下拉框表单的数据可视化看板

原创
06/09 16:46
阅读数 1.3W

DataGear 数据可视化看板内置了看板表单功能(参考dg-dashboard-form),可以实现比较基础的表单功能,当有较复杂的功能需求时,则需要自定义看板表单。

自定义看板表单的实现方式与原生的HTML表单基本一致,只是需要在表单提交时,自定义提交处理函数,调用看板API,将表单值设置为图表的数据集参数值,然后刷新图表。

本文以某公司销售额数据可视化看板为例,介绍如何自定义看板表单。

看板的功能要求是:可查询某部门特定年份的销售额数据图表(柱图)和利润数据图表(饼图),其中【部门】、【年份】是两个表单项,【部门】是一个下拉列表,数据从数据库中加载,【年份】是一个输入框,可填写任意年份。

假设有如下数据库表结构:

【部门】数据库表名称为 t_dept,数据为:

id,      name
dept-01, 销售部一
dept-02, 销售部二
dept-03, 销售部三

【销售额】数据库表名称为 t_sale,数据为:

dept_id, year, month, sale
dept-01, 2020, 01,    50
dept-01, 2020, 02,    60
dept-01, 2020, 03,    35
dept-01, 2021, 01,    50
dept-01, 2021, 02,    20
dept-01, 2021, 03,    35
dept-02, 2020, 01,    40
dept-02, 2020, 02,    30
dept-02, 2020, 03,    50
dept-02, 2021, 01,    50
dept-02, 2021, 02,    80
dept-02, 2021, 03,    60
dept-03, 2020, 01,    65
dept-03, 2020, 02,    90
dept-03, 2020, 03,    70
dept-03, 2021, 01,    30
dept-03, 2021, 02,    40
dept-03, 2021, 03,    80

【利润】数据库表名称为 t_profit,数据为:

dept_id, year, month, profit
dept-01, 2020, 01,    5
dept-01, 2020, 02,    6
dept-01, 2020, 03,    3
dept-01, 2021, 01,    5
dept-01, 2021, 02,    6
dept-01, 2021, 03,    4.5
dept-02, 2020, 01,    4
dept-02, 2020, 02,    3
dept-02, 2020, 03,    5.2
dept-02, 2021, 01,    5
dept-02, 2021, 02,    8
dept-02, 2021, 03,    6.9
dept-03, 2020, 01,    6.5
dept-03, 2020, 02,    3
dept-03, 2020, 03,    7
dept-03, 2021, 01,    3
dept-03, 2021, 02,    4
dept-03, 2021, 03,    3.5

首先,新建如下数据集:

【部门】SQL数据集,查询部门列表:

名称:部门数据集
SQL:
SELECT
  id,
  name
FROM
  t_dept

【销售额】SQL数据集,查询指定部门ID和年份的销售额:

名称:销售额数据集
SQL:
SELECT
  month,
  sale
FROM
  t_sale
WHERE
  dept_id = '${dept}'
  and year = '${year}'

其中,数据集参数为:

名称    类型     必填
dept    字符串   是
year    字符串   是

【利润】SQL数据集,查询指定部门ID和年份的利润:

名称:利润数据集
SQL:
SELECT
  month,
  profit
FROM
  t_profit
WHERE
  dept_id = '${dept}'
  and year = '${year}'

其中,数据集参数为:

名称    类型     必填
dept    字符串   是
year    字符串   是

然后,新建上述数据集对应的图表:

【部门】图表,图表类型为[自定义],因为要在看板中自定义绘制为下拉框:

名称:部门图表
类型:自定义
数据集:部门数据集
数据标记:无

【销售额】图表:

名称:销售额图表
类型:基本柱状图
数据集:部门数据集
数据标记:
month -> 名称 (name)
sale -> 数值 (value) 

【利润】图表:

名称:利润图表
类型:基本饼图
数据集:部门数据集
数据标记:
month -> 名称 (name)
profit -> 数值 (value) 

最后,新建包含上述图表的看板:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dg-dashboard{
}
.dg-chart{
  position: absolute;
  top: 4em;
  bottom: 0px;
  width: 49%;
}
#saleChart{
  left: 0;
}
#profitChart{
  left: 51%;
}
#form select{
  padding: 0.5em 2em;
}
#form input,
#form button{
  padding: 0.5em 1em;
}
</style>
<script type="text/javascript">
//部门图表的自定义渲染器,将图表渲染为下拉框
var selectRenderer=
{
  render: function(chart)
  {
    $("<select name='dept_id' />").appendTo(chart.element());
  },
  update: function(chart, results)
  {
    //取得部门数据集的数据
    var datas = chart.resultDatasFirst(results);
    
    var select = $("select", chart.element());
    select.empty();
    
    $("<option />").attr("value", "").html("").appendTo(select);
    
    for(var i=0; i<datas.length; i++)
    {
      $("<option />").attr("value", datas[i].id).html(datas[i].name)
        .appendTo(select);
    }
  }
};

$(document).ready(function()
{
  //自定义表单提交处理函数,调用看板API,
  //将表单值设置为图表的数据集参数值,然后刷新图表
  $("#form").submit(function()
  {
    //获取表单中的部门ID、年份值
    var deptId = $("select[name='dept_id']", this).val();
    var year = $("input[name='year']", this).val();
    
    if(!deptId)
    {
      alert("请选择【部门】");
      return false;
    }
    
    if(!year)
    {
      alert("请填写【年份】");
      return false;
    }
    
    //获取销售额、利润图表对象
    var saleChart = dashboard.chartOf("saleChart");
    var profitChart = dashboard.chartOf("profitChart");
    
    //设置部门ID、年份参数值
    saleChart.dataSetParamValuesFirst([deptId, year]);
    profitChart.dataSetParamValuesFirst([deptId, year]);
    
    //刷新图表
    saleChart.refreshData();
    profitChart.refreshData();
    
    return false;
  });
});
</script>
</head>
<body class="dg-dashboard">
<div style="text-align:center;">
  <form id="form">
    <label>部门:</label>
    <div id="deptChart"
      dg-chart-widget="50cd42976179ef701b00"
      dg-chart-renderer="selectRenderer"
      style="display:inline-block;"><!--部门图表--></div>
    &nbsp;&nbsp;
    <label>年份:</label>
    <input name="year" type="text" size="8" />
    &nbsp;&nbsp;
    <button type="submit"> 查 询 </button>
  </form>
</div>

<div id="saleChart" class="dg-chart"
  dg-chart-disable-setting="true"
  dg-chart-widget="f4d27caf1179ef772e83"><!--销售额图表--></div>

<div id="profitChart" class="dg-chart"
  dg-chart-disable-setting="true"
  dg-chart-widget="fc5d90603179ef7af3a3"><!--利润图表--></div>

</body>
</html>

点击[保存并展示]按钮,打开看板展示页面,完成!!!

效果图如下所示:

官网地址:http://www.datagear.tech

源码地址:

Gitee:https://gitee.com/datagear/datagear

Github:https://github.com/datageartech/datagear

大屏模板地址:https://gitee.com/datagear/DataGearDashboardTemplate

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部