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

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

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

第一部分：在hegcYuFoeqad之间加载两个js库。

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

英文好的可以去官网：http://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页面代码

下面给大家分享一段代码关于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 '' + this.x + '
' + 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();

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。