可视化神器Echarts实现数据动态展示的实现方式——与数据库连接的ashx技术 (echarts连数据库ashx)
随着大数据时代的到来,数据成为了企业发展的重要资源之一。而数据如何加以利用,进而让企业获得更好的收益,是每个企业都需要思考的问题。数据可视化这个概念应运而生,它可以将冗长的数字数据以图形化的方式呈现出来,让人们更加直观地理解数据。而可视化神器——Echarts,则是目前更受欢迎、应用最广泛的一种数据可视化工具。在实现Echarts数据动态展示的过程中,我们采用与数据库连接的ashx技术,既保证了数据应用的实时性,又提高了数据的安全性。
一、ashx概述
ashx是一种HTTP处理程序,全称为ASP.NET HTTP 处理程序。ashx的本质是一段处理HTTP请求和响应过程的逻辑代码片段。处理程序的文件后缀名为.ashx,其可以表示任意的 MIME 类型。
ashx文件处理程序与一般的ASP.NET页面有很大的不同,它不执行页面渲染,不过对于响应请求,ashx文件处理程序有完全的控制权,可以输出任何类型的信息,比如HTML、XML、文本信息、图像、二进制数据等。
二、Echarts概述
Echarts是一个数据可视化的工具。它是由百度前端技术部开发的一个基于JavaScript的开源数据可视化库,并且它的功能非常强大。 Echarts的特点在于提供了简洁、直观、可交互、可个性化定制的数据可视化效果,支持直观的动态图形呈现效果,且能够与其他数据可视化库设备配合使用。
Echarts中包含了很多图表类型,例如折线图、柱状图、饼图、散点图等等。它的图形展示方式非常丰富,通过它,我们可以快速地实现数据的可视化呈现,帮助我们对数据进行快速的分析,同时可以充分展现数据的美感。
三、Echarts与ashx的结合
在实现Echarts的数据动态展示的过程中,我们需要从数据库中获取数据,并将其传递给Echarts进行展示。具体的实现方式可以采用Echarts中的AJAX远程调用来完成,但是在这里我们采用了与数据库连接的ashx技术。下面我将为大家介绍具体的实现方式:
1.创建一个为.ashx文件后缀的文件(例如:test.ashx)。
2.在该文件中,引用数据库连接、数据访问类、json类等相关类库。
3.在ProcessRequest方法中,利用数据访问类,从数据库中获取数据,将获取到的数据封装成json格式,并输出。
下面是一份示例代码:
“`
using System;
using System.Web;
using System.Data.SqlClient;
using System.Text;
using System.Collections.Generic;
using Newtonsoft.Json;
public class test : IHttpHandler {
public void ProcessRequest (HttpContext context) {
//连接数据库
string connectionString = “database=DatabaseName;server=ServerName;uid=UserName;pwd=Password”;
SqlConnection sqlConnection = new SqlConnection(connectionString);
SqlCommand sqlCommand = new SqlCommand(“Select * from TableName”, sqlConnection);
SqlDataReader sqlDataReader = null;
List> list = new List>();
try
{
sqlConnection.Open();
sqlDataReader = sqlCommand.ExecuteReader();
while (sqlDataReader.Read())
{
Dictionary dic = new Dictionary();
for (int i = 0; i
{
dic[sqlDataReader.GetName(i)] = sqlDataReader.GetValue(i);
}
list.Add(dic);
}
}
catch (Exception ex)
{
throw new Exception(“获取数据失败:” + ex.Message);
}
finally
{
sqlConnection.Close();
sqlDataReader.Close();
}
//将结果转换为ON格式
context.Response.ContentEncoding = Encoding.UTF8;
context.Response.ContentType = “application/json”;
context.Response.Write(JsonConvert.SerializeObject(list));
}
public bool IsReusable {
get {
return false;
}
}
}
“`
在手动绘制Echarts图表时,我们可以直接将上述返回的json数据设置为图表的数据源,即可直接展示数据。使用Echarts内置的ajax方法,调用数据接口,接受服务器返回的ON数据,ECharts都可以将用户输入的数据格式化为自己需要的结构,并将数据填充到图像中进行展示。
Echarts图表的绘制方式很多,其中较为常用的方式是利用Javascript动态地向DOM元素添加图表。我们可以在js脚本中通过ajax方法读取ashx文件并获取数据,然后利用Echarts的option进行图表配置。
下面是一份示例代码:
“`
$.ajax({
type: “POST”,
url: “test.ashx”,
cache: false,
dataType: “json”,
success: function (result) {
var myChart = echarts.init(document.getElementById(“chart”));
var option = {
title: { text: “图表名称” },
tooltip: {},
legend: {},
xAxis: {},
yAxis: {},
series: [
{
name: “图例名称”,
type: “bar”,
data: []
}
]
};
option.series[0].data = result;
myChart.setOption(option);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown)
}
});
“`
四、结语