highchart ajax 动态调用

浏览数：56 / 时间：2015年06月09日

//页面端

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

</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}

</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 动态调用