快捷簡易統計圖表模型設計與實現

三人行工作室發表於2020-04-16
模型

1. 目的

在系統後臺，很多地方都需要以直觀的方式呈現相關統計資料，然而總是從查詢語句、介面、頁面到圖表的過程，繁瑣費時。對於簡單的統計需求，期望建立合適的模型，簡化這個過程，並使得整個過程聚焦資料本身，快捷而簡單，併為整個過程的配置化提供可能。

2. 圖表要素

這裡只討論簡單的統計需求。
要素一：標題 和 統計資料
要素二：圖表型別（餅圖、柱狀圖、線圖）

3. 約定

統計資料的標籤與值屬性名總是使用 name、value，更多維度時也總是先進行約定後再使用。

4. 期待效果

給定一個名字或是編號，得到相關資料，指定圖表型別呈現。
具體描述：
（1）可配置資料語句、圖表標題及指定一個編號
（2）提供一個介面通過指定編號可取得資料
（3）指定圖表型別，將資料應用到該圖表（進一步完善可直接配置生成圖表頁）

5. 資料的模型設計

create table t_chart_data(
   id int primary key,
   code varchar(40) not null,        -- 編號
   chart_title varchar(80) not null, -- 圖表標題
   query varchar(2000),              -- 資料查詢語句
   note varchar(200),                -- 備註
   status bool                       -- 狀態
);
-- code 設定唯一索引
create unique index uidx_chart_data_code on t_chart_data(code);
create sequence seq_chart_data_id;

6. 資料介面

提供通過編號取得資料的介面方法。這裡插入一條資料用於測試。

INSERT INTO t_chart_data(id, code, chart_title, query, note, status)
	VALUES (1, 'test', '測試圖表', 'select ''name'' as name, 1 as value', null, true);

以下為 c# 實現的一個根據 code 讀取並形成介面資料的簡單實現。

public static JObject GetChartData(string code)
{
    JObject result = new JObject();
    string sql = "select chart_title, query from t_chart_data where code=@code";
    var dt = PostgreSQLHelper.ExecuteQuery(ServiceTableHelper.QryHelper.ConnectString, CommandType.Text, sql, new NpgsqlParameter("code", code)).Tables[0];
    if (dt.Rows.Count == 0)
    {
        result["err_code"] = 101;
        result["err_msg"] = "未找到相關配置！";
        return result;
    }

    string chartTitle = dt.Rows[0]["chart_title"] as string;
    string query = dt.Rows[0]["query"] as string;

    // 以下資料查詢可以帶上環境引數實現不同上下文不同查詢結果
    try
    {
        var data = PostgreSQLHelper.ExecuteQuery(ServiceTableHelper.QryHelper.ConnectString, CommandType.Text, query).Tables[0];
        result["err_code"] = 200;
        result["err_msg"] = "success";
        result["chart_title"] = chartTitle;
        result["data"] = JArray.Parse(JsonConvert.SerializeObject(data));
        return result;
    }
    catch(Exception e)
    {
        result["err_code"] = 101;
        result["err_msg"] = e.Message;
        return result;
    }
}

如，傳參 code=test，將得到以下結果：

{
  "err_code": 200,
  "err_msg": "success",
  "chart_title": "測試圖表",
  "data": [
    {
      "name": "name",
      "value": 1
    }
  ]
}

7. 簡易圖表介面

期待效果：在指定位置，以指定圖表呈現資料。通過封裝 echarts 形成工具介面類。
如 EchartsTool.bar("elementId", data); 形式，封裝中會預設一種樣式。
一個簡單的封裝版本可在這裡找到：
https://github.com/triplestudio/helloworld/blob/master/echarts-tool.js

8. 實際應用

引入相關 js

<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
<script src="echarts-tool.js"></script>

可以使用以下方式載入資料，並呈現，如下為柱狀與餅圖示例。

$(function(){
    $.post("api/chartdata.aspx", { code: "test" }, function (resp) {
        $("#userStatTitle").text(resp.chart_title);
        EchartsTool.bar("userStat", resp.data);
    });

    $.post("api/chartdata.aspx", { code: "test" }, function (resp) {
        $("#demo2Title").text(resp.chart_title);
        EchartsTool.pie("demo2", resp.data);
    });
});

執行效果如下圖：

相關文章