多语言展示
当前在线:238今日阅读:84今日分享:32

如何使用第三方插件Hightcharts制作图形报表

在很多系统中都会用到报表,这里使用了Hightcharts报表。Highcharts:功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表,可以满足你对Web图表的任何需求 !由于其功能强大、简单易用、开源免费等优点,Highcharts在国内外越来越受欢迎!Highcharts优势:1、兼容性Highcharts支持目前所有的现代浏览器,包括IE6 +、iPhone/iPad、Android。Highcharts在标准(W3C标准)浏览器中使用SVG技术渲染图形,在遗留的IE浏览器中使用VML技术来绘图。2、开源免费针对个人用户及非商业用途免费,并提供源代码下载,你可以任意的修改它。商业用途需要购买许可,个人及非商业用途须遵循CC BY-NC 3.0协议3、纯JavascriptHighcharts完全基于本地浏览器技术,不需要任何插件(例如Flash、java),不需要安装任何服务器环境或动态语言库支持,只需要两个js文件即可运行。4、图表类型丰富Highcharts目前支持直线图、曲线图、面积图、曲线面积图、面积范围图、曲线面积范围图、柱状图、柱状范围图、条形图、饼图、散点图、箱线图、气泡图、误差线图、漏斗图、仪表图、瀑布图、雷达图,共18种类型图表,其中很多图表可以集成在同一个图形中形成综合图。5、动态性提供丰富的API接口,方便在创建图表后对图表的任意点、线和文字等进行增加、删除和修改操作。支持众多的Javascript事件,结合jQuery、MooTools、Prototype等javascript框架提供的Ajax接口,可以实时地从服务器取得数据并实时刷新图表。6、多轴支持对于需要比较的数据,Highcharts提供多轴支持。并且可以针对每个轴设置其位置、文字和样式等属性。7、动态提示框当鼠标悬停在图表上的数据点时,Highcharts会显示信息提示框,当然,显示的内容和样式可以自己指定和设置。8、图表导出和打印功能你可以将Highcharts图表导出为PNG、JPG、PDF和SVG格式文件或直接在网页上打印出来。9、图表缩放可以设置图表的缩放,让你更方便查看图表数据。10、支持外部数据加载Highcharts支持多种数据形式,可以是Javascript数组、json文件、json对象和表格数据等,这些数据来源可以是本地、不同页面,甚至是不同网站。
工具/原料

VS2013

方法/步骤
1

打开VS2013,选择问文件->新建->项目。

2

在项目中选择web窗体应用程序,然后将名字重新命名为【Flight】

3

选中项目右键->添加->新建文件夹,将文件夹命名为Report。

4

右键Report文件夹->添加->窗体,将窗体名称命名为【ReasonFlight.aspx】

5

在页面【ReasonFlight.aspx】中添加对highcharts的引用,注意引用的顺序。

6

给【ReasonFlight.aspx】页面添加样式。

7

给【ReasonFlight.aspx】添加入口函数。

8

给【ReasonFlight.aspx】添加异步获取JSON数据的方法。

9

给【ReasonFlight.aspx】添加调用highcharts的方法。

10

给【ReasonFlight.aspx】添加HTML。

11

右键点击Report文件夹->添加->一般处理程序,将程序命名为【HandleData】

12

给一般处理程序添加返回JSON数据的方法。

13

将【ReasonFlight.aspx】设为起始页,然后ctrl+F5运行程序,得到如下图的结果。

注意事项
1

这是用Jquery AJax技术获取数据的方法,要注意后台拼接JSON的格式。

2

这报表是有动画效果的,也可以添加其他图形,详情可以参考highcharts官网。

推荐信息