1. Purpose
In the background of the system, many places need to present relevant statistical data in an intuitive way, but the process from query statements, interfaces, pages to charts is always tedious and time-consuming. For simple statistical requirements, it is expected to establish an appropriate model, simplify this process, and make the entire process focus on the data itself, which is quick and simple, and provides the possibility for configuration of the entire process.
2. Chart elements
Only simple statistical requirements are discussed here.
Element 1: Title and statistical data
Element 2: Chart type (pie chart, bar chart, line chart)
3. Agreement
The label and value attribute names of statistical data always use name and value. When more dimensions are used, they are always agreed before use.
4. Expected results
Given a name or number, get the relevant data and specify the chart type to present.
Specific description:
(1) Configurable data sentence, chart title and designation of a number
(2) Provide an interface to obtain data by specifying the number
(3) Specify the chart type and apply the data to the chart (further improvement can be directly configured to generate chart page)
5. Data model design
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. Data interface
Provides an interface method for obtaining data by number. Insert a piece of data here for testing.
INSERT INTO t_chart_data(id, code, chart_title, query, note, status)
VALUES (1, 'test', '测试图表', 'select ''name'' as name, 1 as value', null, true);
The following is a simple implementation of c # to read and form interface data according to 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;
}
}
For example, pass parameter code = test, you will get the following result:
{
"err_code": 200,
"err_msg": "success",
"chart_title": "测试图表",
"data": [
{
"name": "name",
"value": 1
}
]
}
7. Simple chart interface
Expected effect: present the data with the specified chart at the specified location. The tool interface class is formed by encapsulating echarts.
The EchartsTool.bar("elementId", data);form, the default will be a style package.
A simple package version can be found here:
https://github.com/triplestudio/helloworld/blob/master/echarts-tool.js
8. Practical application
Introduce related 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>
The data can be loaded and presented in the following ways, as shown in the example of column and pie charts below.
$(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);
});
});
The effect is as follows:
