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 相关文章推荐
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
Node.js笔记之process模块解读
May 31 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
详细分析React 表单与事件
Jul 08 Javascript
vue中路由跳转不计入history的操作
Sep 21 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将向Java靠拢
2006/10/09 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP实现货币换算的方法
2014/11/29 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
mouse_on_title.js
2006/08/25 Javascript
改版了网上的一个js操作userdata
2007/04/27 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
无毒社区工作方案
2014/05/23 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
大学生个人求职信例文
2014/07/07 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server