ASP.NET一个非常简单实用的图表插件(jquery)

直方图(1)垂直单行条形直方图效果图：。

以上数据取自某网站半年用户注册量。从以上数据可以看出，1月和2月的注册用户数均为0，图表可以清晰对比出各月注册用户数的变化。复制代码如下： //月报函数monthreport () {$。Ajax ({url3360'/home/about '，success3360函数(数据){varjson=eval(数据)；Varopt={data:json，axis _ labels : ['一月'，'二月'，'三月'，'四月'，'五月'，'六月']，Legend3360 ['Serie1 '，' Serie2 '，' Serie3 '，var api=新的jGCharts。API()；jQuery('img ')。attr('src '，api.make(opt))。appendo(' # MyDiv ')；} });} (2)垂直多线棒直方图渲染：以上数据与第一种情况类似。这里是季度统计，第一季度和第二季度的相关数据统计在这里做。结果如图，复制代码如下： //季度报表函数quarteport(){ $。Ajax({ URL 3360 '/home/get total count '，success :函数(数据){var JSON=eval(数据)；Varopt={Data:JSON，Axis _ Labels: ['第一季度'，'第二季度']，Legend3360 ['Serie1 '，' Serie2 '，' Serie3']，Title 3360' Love Chart '，Size :' 400x200。var api=新的jGCharts。API()；jQuery('img ')。attr('src '，api.make(opt))。appendo(' # my quarter ')；} });} (3)横条和多线条条直方图效果图：。

这种情况是上述情况的伪装显示，只是水平和垂直坐标被修改了。复制代码如下： //季度报表函数quartreportbhg(){ $。Ajax({ URL 3360 '/home/gettotal count '，success3360 Function(数据){varjson=eval(数据)；Varopt={data:json，axis _ labels : ['第一季度'，'第二季度']，legend : ['serie1 '，' serie2 '，' serie3']，title 3360' love chart '，size :' 400x200。var api=新的jGCharts。API()；jQuery('img ')。attr('src '，api.make(opt))。appendo(' # myquartbhg ')；} });} 2堆栈图。

堆叠图主要用于显示数据变化的程度。每个科目的分数都显示在这里，似乎不太直观。然而，在这里显示这种效果就足够了。复制代码如下： //分数统计功能分数报表(){$。Ajax ({URL 3360'/home/getscore '，success :函数(数据){var JSON=eval(数据)；Varopt={Data:JSON，Axis _ Labels: ['陈盒'，'爱情'，'蒋木木']，Legend3360 ['中文'，'数学'，'英语'，'综合']，title: '爱情图'，Size 33366。var api=新的jGCharts。API()；jQuery('img ')。attr('src '，api.make(opt))。appendo(' # myScoreReport ')；} });}三线图表

折线图非常适合地理分布和温度分布。复制的代码如下： //温度图函数温度报告(){$。Ajax({ URL 3360 '/home/gettemperature '，success3360函数(数据){varjson=eval(数据)；Varopt={data:json，title:' Love Chart '，axis _ labels :[' 1月'，' 2月'，' 3月'，' 4月'，' 5月'，' 6月'，' 7月'，' 8月'，' 9月'。size: '400x200 '，type: 'lc '，bar_width:'5 '，bar_spacing:'5 '，fillarea : true }；var api=新的jGCharts。API()；jQuery('img ')。attr('src '，api.make(opt))。appendo(' # my temperature ')；} });}四个饼图。

通常我最薄的饼状图给人的感觉就是很好。其实上面两个图类型不同，但是复制的代码如下： //饼图函数quartape(){ $。Ajax({ URL 3360 '/home/getquartape '，success3360函数(数据){varjson=eval(数据)；Varopt={data:json，title:' love chart '，axis_labels: ['一月'，'二月'，'三月'，'四月']，size :' 400x200 '，type : ' p ' }；var api=新的jGCharts。API()；jQuery('img ')。attr('src '，api.make(opt))。appendo(' # my quartpie ')；} });} //3D饼图函数quarter3dpie () {$。Ajax({ URL : '/home/getquartape '，success3360函数(数据){varjson=eval(数据)；Varopt={data:JSON，title:' Love Chart '，axis_labels: ['一月'，'二月'，'三月'，'四月']，size :' 400x200 '，type : ' P3 ' }；var api=新的jGCharts。API()；jQuery('img ')。attr('src '，api.make(opt))。appendo(' # myquart3dpie ')；} });} 5代码分析从上面的代码中，可以看出其实使用这个插件制作图表只是不同类型的。需要修改的是type的值。这里介绍类型支持的类型：折线图lc点图lxy迷你图ls叠加横条图bhs叠加竖条图bvs横条图bhg竖条图bvg饼图P 3D饼图p3 venn图V(目前看不到效果， 可以试试)散点图s(目前看不到效果可以试试)雷达图r(目前看不到效果可以试试)地图t(目前看不到效果可以试试)仪器gom六插件相关参数描述data:是一个二维数组，有以下参数类型：[[153，60，52]，[113，70，60]，[120，80，40]] size: the size 300x200类型：如前所述，无需重复xis_labels:水平字符图例：图例bar_width : 20默认bar_spacing : 1默认bar_spacing颜色： ['4b9b41 '，' 81419b '，41599b']图例显示颜色bg : ' e0e0e0 '背景颜色bg _ trasparency : 50背景透明度BG _ offset3360' 00000 '渐变图形区域颜色chbg_offset : '4b9b41 '图形区域渐变结束颜色chbg_angle : '45 '默认渐变角度chbg_type : 'gradient '默认实心渐变模式标题： '条形图'，图形标题_ color3360' a98147 '，标题_ size: 20默认10grid 3360 true，默认false Grid _ X 3360 5，默认10 X轴网格宽度Grid _ y 30 [6，3，3]]点图、[线宽、点宽、空白宽度]七个代码示例。点击下载。部分代码是使用的数据库数据，运行时可能会出现一些问题，需要进行相应的修改！这里简单介绍一下。有兴趣的话可以尝试修改效果看看跑步效果。