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

DataGear

已于 2022-04-15 17:16:23 修改

阅读量1.7k

点赞数 2

文章标签：数据可视化大数据数据分析可视化 echarts

于 2021-06-14 11:52:31 首次发布

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

版权

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 chartDataSet = chart.chartDataSetMain();
    var datas = chart.resultDatasOf(results, chartDataSet);
    
    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>