<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="scripts/boot.js" type="text/javascript"></script>
<script src="scripts/Highcharts-4.0.3/js/highcharts.js"></script>
<style type="text/css">
html, body {
font-size:12px;
padding:0;
margin:0;
border:0;
height:100%;
overflow:hidden;
}
.style1 {
width: 112px;
}
.mini-textbox {
width: 167px;
}
</style>
</head>
<body>
<div class="mini-fit">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
</body>
</html>
<script type="text/javascript">
mini.parse();
test();
var date = new Array(), val = new Array();
function showchart() {
//开始绘制图表
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container', //容器名，和body部分的div id要一致
type: 'spline' //图表类型，这里选择折线图
},
title: {
text: '曲线数据'
},
xAxis: {
//此处即是上面声明在函数中的数组对象。
categories: date
},
yAxis: {
title: {
text: "<span style='font-size:12px;font-weight:bold;'>my TITLE</span>"
},
//tickInterval: 3,
min: 0.0,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]/*,
labels: {
formatter: function () {
if (this.value == 3) {
return "三级";
} else if (this.value == 6) {
return "二级";
} else if (this.value == 9) {
return "一级";
}
}
}*/
},
tooltip: {
valueSuffix: ' Point'
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Point',
//声明在当前函数中的数组对象
//data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
data: val,
color: '#F75252'
}]
});
}
function test() {
$.ajax({
url: "data/AjaxServiceDoRead.aspx?method=GetChartData",
type: 'post',
cache: false,
success: function (text) {
//alert(text);
var o = mini.decode(text);
//alert(o.data.length);
if (o.data != null && o.data.length != 0) {
for (var w = 0; w < o.data.length; w++) {
//此处楼主需要显示的X轴为"X月份"这么个字符串，后台取得的数据而仅仅为数字，对此进行加工
date.push(o.data[w].mouth + "月份");
//也可以在对数据的处理放在highchart 中进行处理。
val.push(parseFloat(o.data[w].val));
}
}
//val += "]";
/*alert(val[0]);
alert(val[1]);
alert(val[2]);*/
showchart();
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});
/*
$.ajax({
type: "POST",
url: "data/AjaxServiceDoRead.aspx?method=GetChartData",
dataType: 'json',
async: false,
success: function (data) {
alert(data.length);
// 返回如下json 格式数据
// {"data":[
// { "mouth": "1", "val":"3"},
// { "mouth": "2", "val":"6"},
// { "mouth": "3", "val":"9"}
//]}
//对数据进行加工处理，也可以按你自己的需求进行处理
if (data != null && data.length != 0) {
for (var w = 0; w < data.length; w++) {
//此处楼主需要显示的X轴为"X月份"这么个字符串，后台取得的数据而仅仅为数字，对此进行加工
date.push(data[w].mouth + "月份");
//也可以在对数据的处理放在highchart 中进行处理。
val.push(parseFloat(data[w].val));
}
}
//若后台返回的数据仅仅是json 样子的的字符串
//那需要将其格式化
//然后即可对数据进行类似操作。
var dataTmp = eval(data);
}
}, 'json');
*/
}
</script>
浙公网安备 33010602011771号