DataGear 製作自定義數據集下拉框表單的數據可視化看板

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>
    &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>

點擊[保存並展示]按鈕，打開看板展示頁面，完成！！！

效果圖如下所示：