Wijmo 更优美的jQuery UI部件集:复合图表(CompositeChart)

Wijmo的CompositeChart控件允许您使用一个Chart来分析和展现复杂的数据。相同的数据可以使用不同的可视化效果,不同的图表类型展现在一个图表内,使得用户可以从不同的角度,了解分析这组数据所表达的内容 。

本文将介绍如何使用Wijmo的CompositeChart控件,制作一个复合图表。CompositeChart 的API:http://wijmo.com/wiki/index.php/Compositechart,Wijmo 的CompositeChart 化繁为简,将传统 Excel like图表中的三大区域: Plot Area, Legend Area, Label Area, 分离成为更为简单的API: SeriesList, Legend, Axis, Hint, 使得开发者更加容易的理解和使用。

Wijmo的CompositeChart 依赖于下面的这5个核心的JavaScript库:

raphael.js

globalize.min.js

jquery.ui.widget.js

jquery.wijmo.raphael.js

jquery.wijmo.wijchartcore.js

如果需要加入别的类型的Chart,需要再引入其它Chart类型的JavaScript库,这样可以使得开发者可以灵活定制并裁剪出适合自己用例的JavaScript库。例如本实例使用了 PieChart, BarChart, LineChart, 引入的JavaScript库如下:

jquery-1.7.1.min.js

jquery-ui-1.8.18.custom.min.js

globalize.min.js

raphael-min.js

jquery.wijmo.raphael.js

jquery.wijmo.wijchartcore.js

jquery.wijmo.wijbarchart.js

jquery.wijmo.wijpiechart.js

jquery.wijmo.wijlinechart.js

jquery.wijmo.wijcompositechart.js

写点代码,设置一下Chart :

$(document).ready(function () {
$("#wijcompositechart").wijcompositechart({
axis: {
y: {
text: "Total Hardware"
},
x: {
text: ""
}
},
stacked: false,
hint: {
content: function () {
return this.label   '\n '   this.y   '';
}
},
header: {
text: "Hardware Distribution"
},
seriesList: [{
type: "column",
label: "West",
legendEntry: true,
data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }
}, {
type: "column",
label: "Central",
legendEntry: true,
data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }
}, {
type: "column",
label: "East",
legendEntry: true,
data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }
}, {
type: "pie",
label: "asdfdsfdsf",
legendEntry: true,
center: { x: 150, y: 150 },
radius: 60,
data: [{
label: "MacBook Pro",
legendEntry: true,
data: 46.78,
offset: 15
}, {
label: "iMac",
legendEntry: true,
data: 23.18,
offset: 0
}, {
label: "MacBook",
legendEntry: true,
data: 20.25,
offset: 0
}]
}, {
type: "line",
label: "Steam1",
legendEntry: true,
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [3, 6, 2, 9, 5]
},
markers: {
visible: true,
type: "circle"
}
}, {
type: "line",
label: "Steam2",
legendEntry: true,
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [1, 3, 4, 7, 2]
},
markers: {
visible: true,
type: "tri"
}
}
]
});
});

 

代码不多,就有了下图的效果:

1

代码不多,很好分析:

--
axis: {
y: {
text: "Total Hardware"
},
x: {
text: ""
}
--
设置X,Y 轴。
---
stacked: false
---
设置Bar 为非stacked.
---
hint: {
content: function () {
return this.label   '\n '   this.y   '';
}
},
---
设置鼠标 Tooltip.
---
header: {
text: "Hardware Distribution"
},
---
设置图表头.
----
seriesList: [{
type: "column",
label: "West",
legendEntry: true,
data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }
}, {
type: "column",
label: "Central",
legendEntry: true,
data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }
}, {
type: "column",
label: "East",
legendEntry: true,
data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }
}, {
type: "pie",
label: "asdfdsfdsf",
legendEntry: true,
center: { x: 150, y: 150 },
radius: 60,
data: [{
label: "MacBook Pro",
legendEntry: true,
data: 46.78,
offset: 15
}, {
label: "iMac",
legendEntry: true,
data: 23.18,
offset: 0
}, {
label: "MacBook",
legendEntry: true,
data: 20.25,
offset: 0
}]
}, {
type: "line",
label: "Steam1",
legendEntry: true,
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [3, 6, 2, 9, 5]
},
markers: {
visible: true,
type: "circle"
}
}, {
type: "line",
label: "Steam2",
legendEntry: true,
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [1, 3, 4, 7, 2]
},
markers: {
visible: true,
type: "tri"
}
}
]

 

----

设置 SeriesList,每个Series 可以设置其type, label, legendEntry, data, 等等属性。 Series可以设置 SeriesStyles, 和 SeriesHoverStyles, 如:

seriesStyles: [{
fill: "#8ede43", stroke: "#7fc73c", opacity: 0.8
}],
seriesHoverStyles: [{
"stroke-width": "1.5", opacity: 1
}]

 

经过上面的设置,这个CompositeChart就设置好了。也可以使用Server返回的 Json 数据动态绑定生成Chart。

 

点击这里下载,本文实例代码。

 

Wijmo下载,请进入Studio for ASP.NET Wijmo 2012 v1正式发布(2012.03.22更新)!


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/365659.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

广联达2018模板算量步骤_广联达gtj2021实操案例,新增6大板块,快速提高算量效率...

对于从事造价行业的朋友来说,广联达软件是我们最经常用到的软件,不仅是因为广联达软件能够在提高工作效率,主要还是现在大数据下,广联达软件可以做到更精准、零失误广联达软件更新的也比较快,广联达GTJ2021版已经更新出…

鲜为人知的Java 8功能:广义目标类型推断

遍历Java 8功能列表 &#xff0c; 广义目标类型推断使我震惊&#xff0c;因为它是一个特别有趣&#xff0c;鲜为人知的瑰宝。 看起来Java语言设计人员将减轻过去使用泛型&#xff08;Java 5-7&#xff09;时遇到的某些痛苦。 让我们看看他们的例子&#xff1a; class List<…

谈谈技术原则,技术学习方法,代码阅读及其它

一、选用技术的原则比较规范的软件开发过程要到有限的几个公司才能学到。偶现在所采用的方法都是圡方法&#xff0c;主程序员&#xff0c;测试驱动&#xff0c;文档和代码写在一起&#xff0c;原型。但基本上坚持几个原则&#xff1a;在工作上以实用为主导&#xff0c;哪个实用…

python下载库报错_下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决...

前言最近在网上找了很多下载Crypto的方法&#xff0c;感觉作用都不算很大&#xff0c;然后自己瞎搞瞎搞就搞好了&#x1f605;&#xff0c;所以打算分享出来。直接pip下载或者Anaconda下载&#xff0c;Anaconda的话可以直接在官网上下载&#xff0c;pip就不说了&#xff0c;下载…

WPF中元素拖拽的两个实例

WPF中元素拖拽的两个实例 原文:WPF中元素拖拽的两个实例今天结合之前做过的一些拖拽的例子来对这个方面进行一些总结&#xff0c;这里主要用两个例子来说明在WPF中如何使用拖拽进行操作&#xff0c;元素拖拽是一个常见的操作&#xff0c;第一个拖拽的例子是将ListBox中的子元素…

linux重启mysqlsystemctl_解决linux(centos7)重新安装mysql systemctl start mysqld.service时报错...

重新安装mysql时&#xff0c;运行systemctl status mysqld.service报错。[roottest-dcruxue ~]# systemctl start mysqld.serviceJob for mysqld.service failed because the control process exited with error code. See "systemctl status mysqld.service" and &q…

使用vert.x 2.0,RxJava和mongoDB创建simpe RESTful服务

中断了将近半年后发表了一篇新文章。 在本文中&#xff0c;我们将快速了解如何开始使用vert.x&#xff0c;更有趣的是&#xff0c;如何使用RxJava简化异步系统的编程。 我们将涵盖以下主题&#xff1a; 使用Maven创建一个空的vert.x项目 导入IntelliJ并创建一个简单的HTTP服务…

开发进度2

今天主要的精力都是在学习github的基础知识 包括注册安装以及建立一个Git库&#xff0c; 接下来便是菜鸟教程中对github的初步操作详解 注册账户以及创建仓库 要想使用github第一步当然是注册github账号了&#xff0c; github官网地址&#xff1a;https://github.com/。 配置G…

搭建react native所遇到的坑

一、所遇问题 在搭建react native环境中,遇到执行react native run-android命令出现如下问题 1 Could not resolve all dependencies for configuration :classpath. 2 > Could not resolve com.github.dcendents:android-maven-gradle-plugin:3.1.4 3 Required b…

nginx的ngx_http_realip_module模块和http头X-Forwarded-For、X-Real-IP

ngx_http_realip_module模块 realip模块作用&#xff1a;当本机的nginx处于反向代理的后端时可以获取到用户的真实ip。可以让accesslog记录用户真实IP地址。 set_real_ip_from IP1; real_ip_header X-Forwarded-For; real_ip_recursive on; set_real_ip_from —— 设置反向代…

sqlalchemy mysql_使用SQLAlchemy操作MySQL

SQLAlchemy是Python编程语言下的一款开源软件&#xff0c;提供了SQL工具包及对象关系映射(ORM)工具&#xff0c;使用MIT许可证发行。SQLAlchemy首次发行于2006年2月&#xff0c;并迅速地在Python社区中最广泛使用的ORM工具之一&#xff0c;不亚于Django的ORM框架。本文将介绍如…

使用phpstorm+wamp实现php代码实时调试审计

转载自&#xff1a;https://www.bugbank.cn/q/article/5853afaffc0bf4f010ee6ac3.html php调试有N多好用的工具&#xff0c;最近研究到phpstorm配合wamp实现php实时断点调试相当不错&#xff0c;推荐给大家&#xff0c;网上有各种配置版本&#xff0c;但没有一个能好使的。本文…

python处理字符串数组慢_Python字符串处理 - str/bytes

1. strstr.count(sub[, start[, end]])str.encode(encoding"utf-8", errors"strict")str.format(*args, **kwargs) # s "this is from {}".format(__file__)str.find(sub[, start[, end]]) # 没有查找到子串&#xff0c;返回-1str.rfind(sub[, …

如何使用Play框架为https配置SSL证书

我花了数小时试图使它起作用&#xff0c;最后&#xff0c;问题是我自己没有使用keytool生成CSR&#xff08;证书请求&#xff09;。 尝试通过https访问Play时&#xff0c;我一直收到此错误&#xff1a; javax.net.ssl.SSLPeerUnverifiedException&#xff1a;对等方未通过身份…

ERP行业销售如何挖掘潜在客户?

要看不同阶段&#xff0c;小企业发展到一定程度&#xff0c;第一个需求是单体财务系统。因为这个时候财务忙不过来了。在大一点就需要业务系统了&#xff0c;就是生产进销存。有分公司就有集团级软件需求&#xff0c;接着就是oa啊HR啊上下游管理啊等等。接着把握住成本的节省和…

网络隔离主要技术

网络隔离&#xff1a;把两个或者两个以上可路由的网络&#xff08;如&#xff1a;TCP/IP&#xff09;通过不可路由的协议&#xff08;如&#xff1a;IPX/SPX、NetBEUI等&#xff09; 进行数据交换而达到隔离目的。主要原理是使用了不同的协议&#xff0c;故也叫协议隔离。 网络…

mysql 数字to char_mysql数字tochar

例如,指定一个字段的类型为 INT(6), 就可以保证所包含数字少于 6 个的值从...二.字符串类型 MySQL 提供了 8 个基本的字符串类型,分别:CHAR、VARCHAR、......查看当前安装的 MySQL 所支持的字符集。 show charset; 或 show char set; ------------ | Charset | Description | D…

luogu P1880 [NOI1995]石子合并

咕咕咕 说好把济南集训时做的题写写题解还是鸽了然后因为太无聊又来续上了w 传送门~xiu 一道dp 具体是啥dp呢我去看看题解咋说 嗯 区间dp&#xff08;跟我想的一样 把环拆成链来做 n的范围比较小就直接枚举从哪断开 然后就是正常的dp 区间和用前缀和优化一哈 看代码吧 #include…

数据库更改到Java环境中实现可持续和平

对我们而言&#xff0c;可持续和平消除了不确定性。 在这种情况下&#xff0c;由于数据库更改而引起的想法是欢迎进行Ruby的Active Record迁移 。 迁移对我们意味着什么&#xff1f; 嗯&#xff0c;这是一种方便快捷的方法&#xff0c;可以以一致且简单的方式来改变我们的数据…

js页面加载前执行_做一名合格的前端开发工程师:Javascript加载执行问题探索

做前端开发少不了各种利器。比如我习惯用的还是Google浏览器和重型武器Fiddller。一&#xff1a;原始情况 首先大家看看如下的代码&#xff1a;估计90%的程序员都会把js文件放在head中&#xff0c;但是大家有没有深究过呢&#xff1f;很多浏览器都会使用单一的线程来做“界面UI…