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

 更新时间:2015年12月30日 15:21:33   作者:dongdong_hb  
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,通过本文给大家介绍Highcharts使用简例及异步动态读取数据的相关知识,感兴趣的朋友一起学习吧

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(); 

相关文章

  • js中异步函数async function变同步函数的简单入门

    js中异步函数async function变同步函数的简单入门

    这篇文章主要介绍了js中异步函数async function变同步函数的简单入门,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • JavaScript原始数据类型Symbol的用法详解

    JavaScript原始数据类型Symbol的用法详解

    Symbol是ES6中引入的一种新的基本数据类型,用于表示一个独一无二的值。它是JavaScript中的第七种数据类型。本文将详细讲讲Symbol的使用,需要的可以参考一下
    2022-11-11
  • TypeScript与JavaScript多方面阐述对比相同点和区别

    TypeScript与JavaScript多方面阐述对比相同点和区别

    TypeScript和JavaScript在开发交互式网页方面有许多相似之处,在提供TypeScript与 JavaScript的直接比较时,我们可以说JavaScript是一种轻量级的解释型动态语言,用于增强HTML网页,TypeScript是JavaScript的增强版,这意味着TypeScript是JavaScript和其他一些特性的组合
    2024-07-07
  • 最简单的tab切换实例代码

    最简单的tab切换实例代码

    下面小编就为大家带来一篇最简单的tab切换实例代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • javascript 闭包详解

    javascript 闭包详解

    这篇文章主要详细介绍了javascript 闭包的相关资料,十分详尽,需要的朋友可以参考下
    2015-02-02
  • web前端开发upload上传头像js示例代码

    web前端开发upload上传头像js示例代码

    这篇文章主要为大家详细介绍了web前端开发upload上传头像js示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 按键测试,支持像 Ctrl+Alt+Shift+T 的组合键

    按键测试,支持像 Ctrl+Alt+Shift+T 的组合键

    按键测试,支持像 Ctrl+Alt+Shift+T 的组合键...
    2006-10-10
  • 简单实例处理url特殊符号&处理(2种方法)

    简单实例处理url特殊符号&处理(2种方法)

    url里的参数内容包含&符合,我有两种方法解决一是:在页面用JS转码;二是:在后端处理,另外还有网络分享的一些方法,感兴趣的朋友可以参考下哈
    2013-04-04
  • JS实现微信弹出搜索框 多条件查询功能

    JS实现微信弹出搜索框 多条件查询功能

    这篇文章主要介绍了JS实现微信弹出搜索框 多条件查询功能的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • JavaScript偏函数与柯里化实例详解

    JavaScript偏函数与柯里化实例详解

    这篇文章主要介绍了JavaScript偏函数与柯里化,结合实例形式详细分析了JavaScript偏函数与柯里化的概念、原理、定义、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-03-03

最新评论