码迷,mamicode.com
首页 > Web开发 > 详细

highchart ajax 动态调用

时间:2015-04-04 11:57:25      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:

 

//页面端

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>

<script type="text/javascript" src="{$tplurl}/js/highchart/jquery-1.9.1.min.js"></script>


</head>
<body>
<script src="{$tplurl}/js/highchart/highcharts.js"></script>
<script src="{$tplurl}/js/highchart/exporting.js"></script>
{literal}
<script type="text/javascript">

var options = {
chart: {
renderTo:‘container1‘,
type: ‘spline‘,
style: {
color: "#fc0",
borderColor: ‘#dddddd‘,
plotShadow: {
width: 3,
color: ‘#000000‘,
offsetX: 1,
offsetY: 1
}
}
},
legend: {
enabled: false //下面注释2013-2014
},
title: {
text: ‘‘
},
credits: {enabled: false }, //去掉下角标示
exporting: { enabled: false }, //去掉打印及其导出按钮
subtitle: {
text: ‘元优资产‘
},
xAxis: {

tickPixelInterval: 5,//设置横坐标密度
gridLineWidth: 1,
startOnTick: true,
endOnTick: false,
tickmarkPlacement: ‘on‘,
tickLength: 6,
gridLineDashStyle: "dash",
labels: {
format: ‘{value:%Y-%m-%d}‘,
rotation: 10,
align: ‘left‘,
step: 0,
staggerLines: 1,
y: 22,
overflow: ‘justify‘
}
},
yAxis: {
tickPixelInterval: 2,
categories: [ ‘0‘, ‘1‘, ‘2‘, ‘3‘],
title: {
enabled: false
}

},
tooltip: {
headerFormat: ‘<b>{series.name}</b><br>‘,
pointFormat: ‘{point.x:%Y/%m/%d} {point.y}净值‘

},

plotOptions: {
spline: {
marker: {
enabled: false
}
}
},

series: [
{
color: ‘#aa4643‘,
marker: {
symbol: ‘square‘
},
name: ‘2013-2014‘,
data:[]
}
]
};

 


function stw1(){
$(".container1").show();
var series = {
color: ‘#aa4643‘,
marker: {
symbol: ‘square‘
},
name: ‘2013-2014‘,
data: []
};

var form={}; //ajax参数传递

$.post(‘/index.php?user&q=action/login‘,form,function(data){
$.each(data,function(i){
var nian = parseInt(data[i][0][0]); //转换整数
var yue = parseInt(data[i][0][1]); //转换整数
var ri = parseInt(data[i][0][2]); //转换整数
var jz = parseFloat(data[i][1]); //转换浮点数
series.data.push([Date.UTC(nian,yue, ri),jz]); //往data数组下push数据
})
options.series.push(series); //把组合好的series 赋值到 highchart series 中
var chart = new Highcharts.Chart(options); //重新加载 ok
},‘json‘);

 


}

 


</script>
{/literal}

<div onclick="stw1()">加载</div>
<div class="ssss" style="width:50px; height:30px; background: #666; margin: 0 auto; position: relative; overflow: inherit;">
<div class="container1" style="width: 330px; height:235px; position: absolute;left: -310px; top:0px; display: none; float: left;">
<div style="float: left; margin-top: 25px;">
<div style="width:16px; height:12px; float: right; margin-right: -1px;"><img src="{$tplurl}/images/tou.png"></div>
<div style="clear: both;"></div>
<div id="container1" style="width: 300px; height: 180px; margin: 0 auto; border: 3px #000 solid;"></div>
</div>
</div>
</div>

</body>
</html>

 

 

//php程序段

$str[0][0] = array(2013,2,27);
$str[0][1] = -1;
$str[1][0] = array(2013,3,1);
$str[1][1] = 0.5;
$str[2][0] = array(2013,3,5);
$str[2][1] = 0.8;
$str[3][0] = array(2013,3,10);
$str[3][1] = 1;
$str[4][0] = array(2013,3,12);
$str[4][1] = 1.3;
$str[5][0] = array(2013,3,15);
$str[5][1] = 1.8;
$str[6][0] = array(2013,3,27);
$str[6][1] = 2;


//测试highchart
echo json_encode($str); exit;

highchart ajax 动态调用

标签:

原文地址:http://www.cnblogs.com/zhizhong/p/4391696.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!