DataGear 制作自定义数据集下拉框表单的数据可视化看板
程序员文章站
2024-02-12 18:17:10
...
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.resultDatas(chart.resultFirst(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.dataSetParamValue(0, 0, deptId);
saleChart.dataSetParamValue(0, 1, year);
profitChart.dataSetParamValue(0, 0, deptId);
profitChart.dataSetParamValue(0, 1, 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>
<label>年份：</label>
<input name="year" type="text" size="8" />
<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>
点击[保存并展示]按钮，打开看板展示页面，完成！！！
效果图如下所示：
源码地址：
Gitee：https://gitee.com/datagear/datagear
上一篇： 工作笔记：DataGear自定义组件通过传参获取数据
下一篇： 数据可视化