当前位置：Gxlcms > JavaScript > Highcharts使用简例及异步动态读取数据_javascript技巧

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

时间：2021-07-01 10:21:17 帮助过：4人阅读

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中，拼接字符串并返回即可

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

人气教程排行