echarts在.Net中使用实例(二) 使用ajax动态加载数据
通过上一篇文章可以知道和echarts参考手册可知，series字段就是用来存储我们显示的数据，所以我们只需要用ajax来获取series的值就可以.
option
| 名称 | 描述 |
|---|---|
| {color}backgroundColor | 全图默认背景，（详见backgroundColor），支持rgba，默认为无，透明 |
| {Array} color | 数值系列的颜色列表，（详见color），可配数组，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，当系列数量个数比颜色列表长度大时将循环选取 |
| {boolean}renderAsImage | 非IE8-支持渲染为图片，（详见renderAsImage） |
| {boolean}calculable | 是否启用拖拽重计算特性，默认关闭，（详见calculable，相关的还有 calculableColor， calculableHolderColor，nameConnector， valueConnector） |
| {boolean}animation | 是否开启动画，默认开启，（详见 animation，相关的还有 addDataAnimation， animationThreshold，animationDuration， animationDurationUpdate， animationEasing） |
| {Object} timeline | 时间轴（详见timeline），每个图表最多仅有一个时间轴控件 |
| {Object} title | 标题（详见title），每个图表最多仅有一个标题控件 |
| {Object} toolbox | 工具箱（详见toolbox），每个图表最多仅有一个工具箱 |
| {Object} tooltip | 提示框（详见tooltip），鼠标悬浮交互时的信息提示 |
| {Object} legend | 图例（详见legend），每个图表最多仅有一个图例，混搭图表共享 |
| {Object}dataRange | 值域选择（详见dataRange）,值域范围 |
| {Object}dataZoom | 数据区域缩放（详见dataZoom）,数据展现范围选择 |
| {Object}roamController | 漫游缩放组件（详见roamController）,搭配地图使用 |
| {Object} grid | 直角坐标系内绘图网格（详见grid） |
| {Array | Object}xAxis | 直角坐标系中横轴数组（详见xAxis），数组中每一项代表一条横轴坐标轴，标准（1.0）中规定最多同时存在2条横轴 |
| {Array | Object}yAxis | 直角坐标系中纵轴数组（详见yAxis），数组中每一项代表一条纵轴坐标轴，标准（1.0）中规定最多同时存在2条纵轴 |
| {Array} series | 驱动图表生成的数据内容（详见series），数组中每一项代表一个系列的特殊选项及数据 |
首先定义一个Serial类
/// <summary>
/// 定义一个Series类 设置其每一组sereis的一些基本属性
/// </summary>
class Series
{
/// <summary>
/// sereis序列组id
/// </summary>
//public int id
//{
// get;
// set;
//} /// <summary>
/// series序列组名称
/// </summary>
public string name
{
get;
set;
} /// <summary>
/// series序列组呈现图表类型(line、column、bar等)
/// </summary>
public string type
{
get;
set;
} /// <summary>
/// series序列组的数据为数据类型数组
/// </summary>
public List<double> data
{
get;
set;
}
}
接着将Serial实例化并将其转化为json格式(必须用大神器：Newtonsoft.Json.dll)，代码如下图
private void ShowChart()
{
//考虑到图表的series数据为一个对象数组 这里额外定义一个series的类
List<Series> seriesList = new List<Series>(); Series series1 = new Series();
series1.name = "actual";
series1.type = "bar";
series1.data = new List<double>(){ 26061649.1, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00 }; Series series2 = new Series();
series2.name = "Budget";
series2.type = "bar";
series2.data = new List<double>() { 28176503.36, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 2777777.00, 0.00, 0.00, 0.00, 0.00, 0.00, }; seriesList.Add(series1);
seriesList.Add(series2);
var newObj = new
{
series = seriesList
}; string strJson = ToJson(newObj); WriteJson(strJson);
} public static string ToJson( object obj)
{
return NewtonsoftJson(obj);
} public static string NewtonsoftJson(object obj)
{
return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);
} private static void WriteJson(string str)
{
HttpContext.Current.Response.Write(str);
//HttpContext.Current.Response.ContentType = "text/plain"; //设置MIME格式
HttpContext.Current.Response.End();
}
前台代码只需要用ajax来获取值并赋给option的serial属性即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="echarts/echarts.js"></script> </head>
<body>
<div id="main" style=" height:400px;"></div> </body>
</html>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'echarts'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main')); var option = {
tooltip: {
show: true
},
legend: {
data: ['Actual', 'Budget']
},
xAxis: [
{
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
}
],
yAxis: [
{
type: 'value'//Y轴显示的类型,默认为value
}
],
series: []
};
//ajax动态获取数据
$.ajax({
type: 'post',
url: 'ajax.ashx?action=ShowChart',
data: {},
dataType: 'json',
async: false,
success: function (result) {
if (result) {
// 获取json值
option.series = result.series;
// 为echarts对象加载数据
myChart.setOption(option);
}
},
error: function () {
alert("Error");
}
}); }
);
</script>
所见即所得
当然，最后奉上源码！
echarts在.Net中使用实例(二) 使用ajax动态加载数据的更多相关文章
- Jquery chosen动态设置值实例介绍 select Ajax动态加载数据 设置chosen和获取他们选中的值
for (var i = 0; i < obj.length; i++) $("#selectnum" + nid).append("<option myid ...
- smarty中增加类似foreach的功能自动加载数据方法
第一步:在Smarty_Compiler.class.php的_compile_tag函数中增加: 复制代码 代码如下: //加载数据的开始标签case 'load': $this->_push ...
- echarts官网上的动态加载数据bug被我解决。咳咳/。
又是昨天,为什么昨天发生了这么多事.没办法,谁让我今天没事可做呢. 昨天需求是动态加载数据,画一个实时监控的折线图.大概长这样. 我屁颠屁颠的把代码copy过来,一运行,caocaocao~bug出现 ...
- geotrellis使用（二十三）动态加载时间序列数据
目录 前言 实现方法 总结 一.前言 今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...
- 【转】Echarts的使用以及动态加载数据
一.Echarts的介绍 ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新 ...
- echarts系列之动态加载数据
1.echarts学习前言 最近接触到echarts,发现数据可视化真的是魅力无穷啊,各种变幻的曲线交错,以及‘曼妙’的动画效果真是让人如痴如醉! 下面就来一起欣赏她的美... “ ECharts是中 ...
- Android中ListView动态加载数据
1. 引言: 为了提高ListView的效率和应用程序的性能,在Android应用程序中不应该一次性加载ListView所要显示的全部信息,而是采取分批加载策略,随着用户的滑动,动态的从后台加载所需的 ...
- echarts动态加载数据无法更新series 无法更新图表
最近遇到一个Echarts图表无法动态更新数据的问题 最初我在option中设置series的值为一个数组,想着通过修改数组来动态更新图表,但是没变 化,后来发觉是因为图表数据会和之前的合并 看官方的 ...
- 获取ajax动态加载的多个a标签中的 点击的那个a标签对应的值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- jgGrid中的editrules使用函数来进行验证
jgGrid中的editrules 用于设置一些用于可编辑列的colModel的额外属性,大多数的时候是用来在提交到服务器之前验证用户的输入合法性的.比如editrules:{edithidden:t ...
- arcgis api for flex之专题图制作（饼状图，柱状图等）
最近公司给我一个任务,就是利用arcgis api for flex实现在地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作,而不是通过点击点显示气泡窗口的形式来实现,这个公司已经实现了. 经过 ...
- CoreGraphics-基本图形绘制-直线、三角形、矩形、椭圆形、弧形
框架:CoreGraphics 步骤: 1."获取"图形上下文 let cxtRef = UIGraphicsGetCurrentContext()! 2.添加路径 3.渲 ...
- jquery中CheckBox的checked状态用attr()的问题
写了一个脚本,点按钮时选中checkbox,前几次可以选中,多点几次发现checkbox并未选中,调试后发现checked状态根本没有改变,后在网上查证与attr()函数有关,后改为prop问题解决. ...
- AES 加密工具类
/** * AES 是一种可逆加密算法,对用户的敏感信息加密处理 对原始数据进行AES加密后,在进行Base64编码转化: */public class AESOperator { /* * 加密用的 ...
- IOS 序列化与反序列化NSKeyedUnarchiver
开篇 1到底这个序列化有何作用? 面向对象的程序在运行的时候会创建一个复杂的对象图,经常要以二进制的方法序列化这个对象图,这个过程叫做Archiving. 二进制流可以通过网络或写入文件中. 当你写的 ...
- Linux系统内存占用90%以上 ？
问题: [root@dbserver01 zx_epp_db]# free -m total used free shared buffers cached Mem: 15953 14706 1246 ...
- canvas 绘制圆角矩形
<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</ ...
- Meet Sccot Guthrie in Shanghai
9月16日,有幸和其他9位MVP一起在上海和微软全球副总裁Sccot Guthrie.开发工具部门Somasegar.微软中国申元庆见面,聊关于Azure和开发方面的话题.同时,由于本人目前对物联网( ...
- 《java JDK7 学习笔记》之继承与多态
1.面向对象中,子类继承父类,避免重复的行为定义,不过并非为了避免重复定义行为就使用继承.应该正确判断使用继承的时机及继承之后灵活的运用多态,才是学习继承时的重点. 2.程序代码重复在程序设计上,就是 ...