可视化神器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)
}
});
“`
四、结语
相关问题拓展阅读：
echarts3制作关系图时，两个节点互相连线重合问题求助
使用_buildLinkShapes(nodes, links)函数，针对定义的全部线段数据，设置线段的权重（粗细）、样式和高亮样式。
1、zrender定义线段数据：
{source : 1, target : 0, weight : 1,
onclick:function(params){
alert(params.target.style.text);
},
itemStyle:{
normal:{
lineWidth:10,
text:’丽萨-
乔布斯
‘,
textColor:’#’,
textFont:’bold 15px verdana’,
textPosition:’inside’
}
}}
onclick是点击事件。onclick:function(params){alert(params.target.shape);
lineWidth是线段宽度。
text是标注的文字。
textPosition 采用的zrender中的文罩亏字位芦闷缺置。
定义线段事件和样陪辩式全部代码：
function _buildLinkShapes(nodes, links) {
var l = links.length;
for (var i = 0; i linkStyle
if (typeof(link.itemStyle) !== ‘undefined’) {
if(link.itemStyle.normal){
zrUtil.merge(shape.style, link.itemStyle.normal, {
overwrite : true
});
}
if(link.itemStyle.emphasis){
zrUtil.merge(
shape.highlightStyle,
link.itemStyle.emphasis,
{ overwrite : true }
);
}
}
//zhao
if (typeof (link.onclick) !== ‘undefined’) {
if (link.onclick) {
shape.onclick = link.onclick;
}
}
linkShapes.push(shape);
self.shapeList.push(shape);
zr.addShape(shape);
}
var narr = new NDArray(linkWeights);
var max = narr.max();
if (max !== 0) {
linkWeights = narr.mul(1/max, narr).toArray();
}
}
关于echarts连数据库ashx的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
