优纳美食网
您的当前位置:首页Highcharts使用简例及异步动态读取数据_javascript技巧

Highcharts使用简例及异步动态读取数据_javascript技巧

来源:优纳美食网


Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

第一部分:在head之间加载两个JS库。


可以到http://www.hcharts.cn/ 下载,有相关教程和使用说明文档。

英文好的可以去官网:http://www.highcharts.com/

第二部分:JS代码



第三部分:C#代码

输出的数据格式为 {"rows1":[10,20,30,40,50,200,70,100,90,200,100,60]} 
 多条的数据格式为 {"rows1":[10,20,30,40,50,200,70,100,90,200,100,60],"rows2":[10,20,30,40,50,200,70,100,90,200,100,60]} 

第四部分:HTML页面代码



下面给大家分享一段代码关于highcharts异步获取数据

页面异步代码



这里要注意的是:x轴数组定义好后,定义y轴数据的时候要把对应在x轴上的值也push到数组里,不然会造成无法显示的情况

对应的在ajaxhandler中,拼接字符串并返回即可


 




        
显示全文