highcharts 调用 json

时间 2019-11-29

原文原文链接

Highcharts结合Asp.net实现动态数据股票式图形显示实例 .【转】

本实例针对的具体应用行情是我须要定时从数据库中读取某商品价格,而后以图形显示在网页上,相似于股票中的交易品种价格走势图.javascript

我使用的是asp.net,结合jQuery中的Highcharts插件实现,该插件能够支持不少类型的图形,但都是静态的,提供的实例都须要改造,有兴趣的朋友能够去Highcharts官网看看(http://www.highcharts.com/),里面提供了不少的Demo,说实在的要实现个人需求,更应该使用Highstock,可是看了Highcharts的dynamic-update实例,也能够实现个人需求界面更加简洁些,因此本文采用的是Highcharts中dynamic-update模型,图形类型是spline最终实现的效果贴图以下（品旗金这个品种的价格是10秒种更新一次的,每10秒对线状图形加一个点）:html

实现步聚:java

用vs新建一web网站,新建asp.net页面DynamicUpdate.aspx,页面代码以下:jquery

[html] view plain copy print ?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicUpdate.aspx.cs"
Inherits="WebImg.DynamicUpdate" %>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>动态显示价格图例</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var randomCode = parseInt(Math.random() * 10000);
var oldrandomCode = parseInt(Math.random() * 10000);
$.ajax({
url: "ajaxhandler/dataupdate.ashx?" + randomCode + "=" + oldrandomCode + "&flag=1",
type: "get",
dataType: "json",
success: function (data, textStatus, XMLHttpRequest) {
var ctime = new Date();
ctime.setTime(parseInt(data.rows[0].times));
var x = ctime.getTime(), // current time
y = data.rows[0].price * 200;
series.addPoint([x, y], true, true);
},
error: function () { }
});
}, 10000);
}
}
},
title: {
text: '品旗撮合交易市场品种行情'
},
xAxis: {
title: {
text: '时间'
},
type: 'datetime',
tickPixelInterval: 150,
labels:{formatter:function(){
var vDate = new Date(this.value);
return vDate.getHours()+":"+vDate.getMinutes()+":"+vDate.getSeconds();
}}
},
yAxis: {
title: {
text: '价格'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
text:'品旗金属交易市场',
url:'http://www.inv6.com'
},
series: [{
name: '品旗金(GOLD)',
data: (function () {
var data = [],
i;
var jsonData = <%= jsonstr %>;
for (i = -19; i <= 0; i++) {
var ctime = new Date();
ctime.setTime(parseInt(jsonData.rows[i+19].time1));
data.push({
x: ctime.getTime(),
y: jsonData.rows[i + 19].price * 200
});
}
return data;
})()
}]
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
</body>
</html>

Highcharts的属性中renderTo表示显示容器,web

events表示容器须要注册的事件,其中的load表示在加载完成以后发生,这里在load中设置了一个js计时器,10秒钟发生一次,里面的代码就是经过jQuery 中的ajax向跟DynamicUpdate.aspx页面在同一根目录下的 ajaxhandler文件夹的dataupdate.ashx文件请求最新一条的品旗金(GOLD)品种的价格数据,这里在ajax的url中为什么要加 randomCode + "=" + oldrandomCode是由于加一个随机数能够避免缓存,而flag=1则是由于个人dataupdate.ashx文件要接受多个不一样的ajax的请求,因此用flag区分一下ajax

xAxis表示针对容器的x轴进行定义的的属性合集,type表示显示的文本类型,可选,这里我填写的是时间类型,这里注意实例默认采用的是GMT时间,也可使用 UTC时间,但咱们通常都采用的是北京时间,(GMT or UTC)+8小时 = 北京时间,所以当咱们用ajax获取的时间是北京时间时,应在小时上减去8小时(这里我还要分享一条经验,如何将服务器时间转换为.getTime()方法可使用的js时间,那就是将服务器时间减去1970-1-1,将剩下的天数转换为毫秒数,而后在js中经过setTime方法给新初始化的时间赋值,我发现js中直接用new Date(年,月,日,时,分,秒,毫秒)的形式初始化一个js时间用getTime()获取到的结果是不正确的,至于为何要减去1970-1-1,这是由于getTime()方法的定义就是获取从当前时间从1970-1-1后的毫秒数)，当x轴显示的不是时间时或须要本身定义时,也能够经过categories属性来定义,tickPixelInterval表示x轴的密度,labels则用来格式化x轴的显示格式数据库

yAxis表示针对容器的y轴进行定义的属性合集,大体与x轴的属性是同样的,可是在Highcharts中是没法经过categories定义y轴的固定值的,Highcharts的y轴是根据给出的坐标点数据自动生成的,这取决于series属性的data子属性,好比当你给data所赋值的最大值是300,最小值是100,那么y轴的显示将从100到300之间,或者你也能够设置yAxis的max或min属性json

series表示显示在容器中全部曲线的合集,这里我只显示一条曲线,name表示曲线的名称,data表示该条曲线一系列坐标点的集合,x在前,y在后,它是一个js数组,本例中因为x轴显示的是时间,所以须将数组对象的x属性设置为时间,可是Highcharts中并非直接将时间赋给x轴,而是将从1970-1-1到某个时间之间的毫秒数来赋给x轴表示这个时间,因此必须用getTime()方法,y轴坐标点的形式必须是 y = 较小数字 * 整数的形式,也没有摸透Highcharts为什么必须这样,因为本实例中品种的价格数据通常是通常多左右,因此只好在获取数据时除以200，而后再给y轴赋值时再乘以200。api

页面代码中的<%= jsonstr %>是我须要从服务器获取的初始数据,以初始化图形，页面的cs代码以下(DynamicUpdate.aspx.cs):数组

[csharp] view plain copy print ?

public string jsonstr = "";
protected void Page_Load(object sender, EventArgs e)
{
getData();
}
private void getData()
{
DataTable dtPrice = SQLDBHelper.ExecuteTable("select top 20 TMPCode,TMPTime,TMPPrice from TabMerPrice with(nolock) order by TMPTime desc");
string json = "{\"rows\":[";
for (int i = (dtPrice.Rows.Count-1); i >= 0; i--)
{
json += "{\"time1\":\"" + (Convert.ToDateTime(dtPrice.Rows[i]["TMPTime"]).AddHours(-8) - new DateTime(1970, 1, 1)).TotalMilliseconds + "\",\"price\":\"" + (Convert.ToDecimal(dtPrice.Rows[i]["TMPPrice"])/200) + "\"},";
}
json = json.TrimEnd(',');
json += "]}";
jsonstr = json;
}

其中TabMerPrice表是品种价格信息表,TMPTime时间,TMPPrice价格,TMPTime的时间间隔是十秒,我用数据库做业生成该表的记录,十秒钟发生一次

AddHours(-8)是为了将时间转换为北京时间,生成的数据格式是json格式

dataupdate.ashx代码以下:

[csharp] view plain copy print ?

public void ProcessRequest(HttpContext context)
{
string flag = context.Request.QueryString["flag"].ToString();
switch (flag)
{
case "1"://获取品种当前价格
GetMerPrice(context);
break;
}
}
private void GetMerPrice(HttpContext context)
{
context.Response.Clear();
context.Response.Buffer = true;
context.Response.ContentType = "application/json";
context.Response.ContentEncoding.GetBytes("utf-8");
DataTable dtPrice = SQLDBHelper.ExecuteTable("select top 1 TMPCode,TMPTime,TMPPrice from TabMerPrice with(nolock) order by TMPTime desc");
string json = "{\"rows\":[";
json += "{\"times\":\"" + (Convert.ToDateTime(dtPrice.Rows[0]["TMPTime"]).AddHours(-8) - new DateTime(1970, 1, 1)).TotalMilliseconds + "\",\"price\":\"" + (Convert.ToDecimal(dtPrice.Rows[0]["TMPPrice"]) / 200) + "\"}";
json = json.TrimEnd(',');
json += "]}";
context.Response.Write(json);
context.Response.Flush();
context.Response.End();
}

1. highcharts笔记 highcharts学习 highcharts用法
2. highcharts的用法
3. Highcharts JAVA用例
4. HighCharts使用
5. highcharts
6. Highcharts
7. highcharts的使用
8. JSON数据调用
9. highcharts只用指南
10. Highcharts使用指南
更多相关文章...
• PHP JSON - PHP教程
• R JSON 文件 - R 语言教程
• 三篇文章了解 TiDB 技术内幕 —— 谈调度
• Composer 安装与使用