C#曲线分析平台的制作（二，echarts前后台数据显示）
在上一篇博客中，学习了使用javascript和jquery两种方法来进行前后台交互。本篇博客着重利用jquery+echarts来实现从后台取数，从前端echarts中展示。
1.html页面编写：
a.echarts.js导入，jquery框架导入。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/echart/echarts.js"></script>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/echart/macarons.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>echart demo to ajax+json</title>
</head>
b.echarts+ajax脚本编写：
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var mychart = echarts.init(document.getElementById('main'), 'macarons');
mychart.setOption({
title: {
text: '异步加载数据示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
mychart.showLoading();
var names =[]; //类别数组（实际用来盛放X轴坐标值）
var nums = []; //销量数组（实际用来盛放Y坐标值） $.ajax({
type: "post",
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url: "index.aspx?method=getdata",
//url:"Handler.ashx?method=getdata",
data: {},
dataType: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
//var json = $.parseJSON(result);
alert(result); for (var i = 0; i < result.length; i++) {
//alert(result[i].name);
names.push(result[i].names); //挨个取出类别并填入类别数组 }
for (var i = 0; i < result.length; i++) {
nums.push(result[i].nums); //挨个取出销量并填入销量数组
}
mychart.hideLoading(); //隐藏加载动画
mychart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: nums
}]
}); } },
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
2.后台脚本编写（有两种方法：一种使用aspx后台脚本，一种使用一般处理程序ashx）
2.1利用aspx后台脚本：（使用Newtonsoft.dll的jsonconvert方法转换为json字符串）
public partial class index : System.Web.UI.Page
{
List<object> lists = new List<object>();
string result = "";
protected void Page_Load(object sender, EventArgs e)
{ string method = Request.QueryString["method"];
if (!string.IsNullOrEmpty(method))
{
if (method == "getdata")
{
data();
}
}
}
private void data()
{ lists = new List<object>(); var obj = new { names = "yuan", nums = 12 };
var obj1 = new { names = "yuan1", nums = 19 };
lists.Add(obj);
lists.Add(obj1);
object JSONObj = (Object)JsonConvert.SerializeObject(lists);
Response.Write(JSONObj);
// 一定要加，不然前端接收失败
Response.End();
}
2.2利用ashx：（利用javascriptSerializer进行序列化传输）
public class Handler : IHttpHandler {
JavaScriptSerializer jsS = new JavaScriptSerializer();
List<object> lists = new List<object>();
string result = "";
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string method = context.Request["method"];
if (!string.IsNullOrEmpty(method))
{
if (method == "getdata")
{
lists = new List<object>();
var obj = new { names = "yuan", nums =12 };
var obj1 = new { names = "yuan1", nums = 19 };
lists.Add(obj);
lists.Add(obj1);
jsS = new JavaScriptSerializer();
result = jsS.Serialize(lists);
context.Response.Write(result);
}
}
//context.Response.Write("Hello World");
}
public bool IsReusable {
get {
return false;
}
}
}
最终效果：
C#曲线分析平台的制作（二，echarts前后台数据显示）的更多相关文章
- C#曲线分析平台的制作（六，Sqldependency+Signalr+windows 服务）
在经过五天的学习和资料收集后,终于初步实现了利用sqldependency进行数据库变化监控,signalr进行前后台交互,数据实时更新.下面将源代码贴出进行初步分析: 1.系统整体框架构成: 2.具 ...
- C#曲线分析平台的制作（四，highcharts+ajax加载后台数据）
在上一篇博客:C#曲线分析平台的制作(三,三层构架+echarts显示)中已经完成了后台的三层构架的简单搭建,为实现后面的拓展应用开发和review 改写提供了方便.而在曲线分析平台中,往往有要求时间 ...
- C#曲线分析平台的制作（一，ajax+json前后台数据传递）
在最近的项目学习中,需要建立一个实时数据的曲线分析平台,这其中的关键在于前后台数据传递过程的学习,经过一天的前辈资料整理,大概有了一定的思路,现总结如下: 1.利用jquery下ajax函数实现: & ...
- C#曲线分析平台的制作（三，三层构架+echarts显示）
本文依据CSDN另一位网友关于三层构架的简单搭建,基于他的源码进行修改.实现了三层构架合理结构,以及从数据库中传递数值在echarts显示的实验目的. 废话不多说,show me codes: 具体构 ...
- C#曲线分析平台的制作（五，Sqldependency+Signalr+windows 服务 学习资料总结）
在前篇博客中,利用interval()函数,进行ajax轮询初步的实现的对数据的实时显示.但是在工业级别实时显示中,这并非是一种最好的解决方案.随着Html5 websocket的发展,这种全双工的通 ...
- centos7搭建ELK Cluster集群日志分析平台（二）：Logstash
续 centos7搭建ELK Cluster集群日志分析平台(一) 已经安装完Elasticsearch 5.4 集群. 安装Logstash步骤 . 安装Java 8 官方说明:需要安装Java ...
- ELK搭建实时日志分析平台之二Logstash和Kibana搭建
本文书接前回<ELK搭建实时日志分析平台之一ElasticSearch> 文:铁乐与猫 四.安装Logstash logstash是一个数据分析软件,主要目的是分析log日志. 1)下载和 ...
- TOP100summit：【分享实录-WalmartLabs】利用开源大数据技术构建WMX广告效益分析平台
本篇文章内容来自2016年TOP100summitWalmartLabs实验室广告平台首席工程师.架构师粟迪夫的案例分享. 编辑:Cynthia 粟迪夫:WalmartLabs实验室广告平台首席工程师 ...
- 传统式与自助式BI分析平台有什么区别
如今自助式BI分析平台已经成为众多企业进行数据分析工作时的首选,究竟自助式BI分析平台在数据分析中有哪些优势,可以受到企业如此的青睐与追捧呢?小编将在本文中,跟大家一起来了解自助式BI分析平台的概念. ...
随机推荐
- Spring Boot WebFlux-07——WebFlux 中 Redis 实现缓存
第07课:WebFlux 中 Redis 实现缓存 前言 首先,补充下上一篇的内容,RedisTemplate 实现操作 Redis,但操作是同步的,不是 Reactive 的.自然,支持 React ...
- linux基础（电脑基本原理）
1.计算机体系结构:运算器 控制器 存储器 输入设备 输出设备 详解:存储即内存:编址的存储单元.即每一个存储单元在都有一个编址. 控制器告诉运算器加数在存储器的哪个存储单元. POST: ...
- 解决java socket在传输汉字时出现截断导致乱码的问题
解决java socket在传输汉字时出现截断导致乱码的问题 当使用socket进行TCP数据传输时,传输的字符串会编码成字节数组,当采用utf8编码时,数字与字母长度为1个字节,而汉字一般为3个字节 ...
- 深入理解 sync.Once 与 sync.Pool
深入理解 sync.Once 与 sync.Pool sync.Once 代表在这个对象下在这个示例下多次执行能保证只会执行一次操作. var once sync.Once for i:=0; i & ...
- rust漫游 - 写时拷贝 Cow<'_, B>
rust漫游 - 写时拷贝 Cow<'_, B> Cow 是一个写时复制功能的智能指针,在数据需要修改或者所有权发生变化时使用,多用于读多写少的场景. pub enum Cow<'a ...
- 2、SpringBoot整合之SpringBoot整合servlet
SpringBoot整合servlet 一.创建SpringBoot项目,仅选择Web模块即可 二.在POM文件中添加依赖 <!-- 添加servlet依赖模块 --> <depen ...
- Windows10上开启WSL2(Windows Subsystem for Linux 2)及Docker Desktop For Windows
什么是WSL2 WSL2(Windows Subsystem for Linux 2)是适用于Linux的Windows子系统体系结构的一个新版本,它支持适用于Linux的Windows子系统在Win ...
- 乘风破浪，遇见华为鸿蒙智能终端系统(HarmonyOS 2)，打造面向全场景的分布式操作系统
什么是鸿蒙智能终端系统(HarmonyOS 2) HarmonyOS 是新一代的智能终端操作系统,为不同设备的智能化.互联与协同提供了统一的语言.带来简洁,流畅,连续,安全可靠的全场景交互体验. ht ...
- 垃圾处理器-CMS
一.简介 CMS垃圾收集器是一款用于老年代的,使用复制-清除-整理算法的垃圾收集器. 二.GC阶段 1.初始化标记(STW) 暂停应用程序线程,遍历 GC ROOTS 直接可达的对象并将其压入标记栈( ...
- 堆和栈的内存分布&一些关于内存泄露、栈溢出和野指针的内容(头秃
内存泄漏&栈溢出 C++中,我们主要涉及的内存是栈和堆, 堆 (By programmer) 申请后由程序员主动释放,遗忘后果严重: 栈 (By compiler)需要时由编译器分配,在不需 ...