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


Posted in Javascript onDecember 30, 2015

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

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

<script src="html/js/jquery.js"></script>
<script src="html/js/chart/highcharts.js"></script>

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

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

第二部分:JS代码

//定义一个Highcharts的变量,初始值为null
var oChart = null;
//定义oChart的布局环境
//布局环境组成:X轴、Y轴、数据显示、图标标题
var oOptions = { 
 //设置图表关联显示块和图形样式
 chart: { 
  renderTo: 'container', //设置显示的页面块
  //type:'line'    //设置显示的方式
  type: 'column'
 },
 //图标标题
 title: { 
  text: '图表展示范例', //设置标题
  //text: null, //设置null则不显示标题
 },
 //x轴
 xAxis: {
  title: {
   text: 'X 轴 标 题'
  },
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
 },
 //y轴
 yAxis: {
  title: { text: 'Y 轴 标 题' }, //设置Y轴标题关闭
 },
 //数据列
 series: [{
  data:[120,360,560,60,360,160,40,360,60,230,230,300]
  }] 
}; 
$(document).ready(function(){
 oChart = new Highcharts.Chart(oOptions);
 //异步添加第2条数据列
 LoadSerie_Ajax();
}); 
//异步读取数据并加载到图表
function LoadSerie_Ajax() { 
  oChart.showLoading(); 
  $.ajax({ 
   url : 'ajax/get_value.aspx',
   type : 'POST',
   dataType : 'json',
   async : false, //同步处理后面才能处理新添加的series
   contentType: "application/x-www-form-urlencoded; charset=utf-8", 
   success : function(rntData){
     var oSeries = {
     name: "第二条",
     data: rntData.rows1
    };
    oChart.addSeries(oSeries);
   }
  });
  oChart.hideLoading(); 
}

第三部分:C#代码

Response.Clear();
Response.Write("{\"rows1\":[10,20,30,40,50,200,70,100,90,200,100,60]}");
Response.End(); 
 输出的数据格式为 {"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页面代码

<div id="container" style="min-width:400px;width:1200px;height:400px;"></div>

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

页面异步代码

$(function () {
   var chart_validatestatics;
   $(document).ready(function () {
    var options_validatestatics = {
     chart: {
      renderTo: 'container_validatestatics',
      type: 'column'
     },
     title: {
      text: '验票分析'
     },
     subtitle: {
      text: 'tourol.cn'
     },
     xAxis: {
    },
    yAxis: {
     title: {
      text: '人数'
     }
    },
    plotOptions: {
     bar: {
      dataLabels: {
       enabled: true
      }
     }
    },
    tooltip: {
     formatter: function () {
      return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '人';
     }
    },
    credits: {
     enabled: false
    },
    series: [{
     name: "验票用户",
     width: 3
    }]
   }
   $.get("/ajaxhandler/dataupdate.ashx?operate_type=validatestatics", function (data) {
    var xatrnames = [];
    var yvalidators = [];
    for (var i = 0; i < data.rows.length; i++) {
     xatrnames.push([
       data.rows[i].atrname
      ]);
     yvalidators.push([
       data.rows[i].atrname,
       parseInt(data.rows[i].nums)
      ]);
    }
    alert(xatrnames + yvalidators);
    options_validatestatics.xAxis.categories = xatrnames
    options_validatestatics.series[0].data = yvalidators;
    chart_validatestatics = new Highcharts.Chart(options_validatestatics);
   });
  });
 });

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

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

string json = "{\"rows\":[";
  for (int i = 0; i < datas.Rows.Count; i++)
  {
   json += "{\"atrname\":\"" + datas.Rows[i]["name"] + "\",\"nums\":\"" + datas.Rows[i]["nums"] + "\"},";
  }
  json = json.TrimEnd(',');
  json += "]}";
  context.Response.Write(json);
  context.Response.Flush();
  context.Response.End();
Javascript 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
jquery实现倒计时效果
Dec 14 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 #Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 #Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 #Javascript
JavaScript小技巧整理
Dec 30 #Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 #Javascript
jQuery给元素添加样式的方法详解
Dec 30 #Javascript
Underscore源码分析
Dec 30 #Javascript
You might like
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
php微信开发之百度天气预报
2016/11/18 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
解决python报错MemoryError的问题
2018/06/26 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
优秀员工自荐书
2013/12/19 职场文书
霸王洗发水广告词
2014/03/14 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
通讯稿范文
2015/07/22 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python