欢迎您访问我爱IT技术网,今天小编为你分享的编程技术是:【asp.net中一款极为简单实用的图表插件(jquery)】,下面是详细的讲解!
asp.net中一款极为简单实用的图表插件(jquery)
一 柱状图
(1) 竖状单行条形直方图效果图:

以上数据取自某个网站六个月份的用户注册量 。从以上数据可以看出,一二月份注册用户数为0,图表能够清晰对比每个月份用户注册量的变化。
(2) 竖状多行条形直方图效果图:
以上数据和第一种情况差不多,这是这里是做的季度统计,这里做了第一季度和第二季度的相关数据统计。显示结果如图
(3) 横条多行条形直方图效果图:
这种情况是上面一种情况的变相显示,只不过横纵坐标修改了。
二 堆栈图

堆栈图多用于显示数据变化程度,此处显示了各科分数的情况,似乎不是太直观。但是这里能够显示此种效果就够了
三 折线图

折线图很适合地域分布,温度分布图。
四 饼图

一般情况下我最细的是饼图,给人的感觉就是很不错。 以上两个图其实就这是类型不同而已
五 代码分析
从上面的代码可以看出,其实使用这个插件制作图表就类型的不同而已。需要修改的是 type 这个值
这里介绍type支持的类型:
折线图 lc
点线图 lxy
Sparkline 图 ls
叠加型水平条形图 bhs
叠加型垂直条形图 bvs
水平条形图 bhg
垂直条形图 bvg
饼图 p
三维饼图 p3
维恩图 v (目前没有看到效果,各位可以尝试)
散点图 s (目前没有看到效果,各位可以尝试)
雷达图 r (目前没有看到效果,各位可以尝试)
地图 t (目前没有看到效果,各位可以尝试)
仪表 gom
六 插件相关参数说明
data: 一个二维数组,参数类型如下:[[153, 60, 52], [113, 70, 60], [120, 80, 40]]
size: 图片显示的大小 ( width x height ) 300x200
type: 前面已经说过了 这里不再累述
xis_labels : 横轴文字
legend :图例
bar_width : 20 默认 20 条形宽度
bar_spacing : 1 默认1 条形间距
colors : ['4b9b41','81419b','41599b'] 图例显示颜色
bg : 'e0e0e0' 背景颜色
bg_trasparency : 50 背景透明度
bg_offset : '000000' 渐变终结色
bg_angle : '45', 默认 90 渐变角度
bg_type : 'gradient' 默认 solid 渐变方式
bg_width : '10' 默认 10 渐变步伐
chbg : 'FFFFFF', 图表区颜色
chbg_offset : '4b9b41' 图表区渐变终结色
chbg_angle : '45' 默认90 渐变角度
chbg_type : 'gradient' 默认 solid 渐变方式
title : 'Bar Chart', 图表标题
title_color : 'a98147',
title_size : 20 默认10
grid : true, 默认 false 网格
grid_x : 5, 默认 10 X轴网格宽度
grid_y : 5, 默认格宽度
grid_line : 5, 默认
grid_blank : 0 默认度
fillarea : true 默认图表区
fillbottom : true 默认下端
filltop : true 默认充上端
lines: [[4,2,2],[6,3,3]] 点线图,[线宽,点宽,空白宽]
七 代码示例下载
点击下载, 代码有一部分是使用的的数据库数据,因此运行的时候可能会有问题,这里需要做相应的修改!
这里就简单介绍到这里,如果各位有兴趣可以尝试修改其中的效果来看看运行效果
关于asp.net中一款极为简单实用的图表插件(jquery)的用户互动如下:
相关问题:
答: >>详细
相关问题:
答: >>详细
相关问题:
答: >>详细
- 【asp】asp.net url重写浅谈-net-url重写
- 【DataSet】DataSet、DataTable、DataRow区别详解
- 【asp】asp.net 动态添加多个用户控件-net-动态添
- 【ASP】ASP.NET中内嵌页面代码的一个问题-NET-内
- 【As】Asp.net中的页面乱码的问题-sp--pn-ne-et
- 【增加记录】asp.net中获取新增加记录的ID Access
- 【创建】ASP.NET Web API教程 创建域模型的方法详
- 【Asp】Asp.net 页面调用javascript变量的值-net-
- 【ASP】ASP.NET 5升级后如何删除旧版本的DNX-NET5
- 【404页面】ASP.NET设置404页面返回302HTTP状态码
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-
