标签：style blog http io ar color sp java for
HighCharts 图表插件 自定义绑定 时间轴数据，解决时间轴自动显示数据与实际绑定数据时间不对应问题！
可能要用到的源码片段：http://code.662p.com/list/14_1.html
学习示例如下：
<!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=gb2312" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="highcharts.js" type="text/javascript"></script>
<script src="exporting.js" type="text/javascript"></script>
</head>
<body style="margin: auto;">
<!-- 喊单收益曲线图 -->
<div id="container" style="width: 100%; height: 100%; margin: 0 auto">
</div>
</body>
</html>
<script type="text/javascript" language="javascript">
/*
* 官方文档： http://www.highcharts.me/
*/
var chart, myTime = "", myData = "";
$(function () {
//盈利率
myData = "[-20.25,-12.30,-3.68,5.45,19.00,-2.78,-5.45,9.80,10.45,16.15]";
options.series[0].data = eval(myData);
//时间
myTime = "[‘2014-03-01 01:10‘,‘2014-03-01 01:30‘,‘2014-03-01 01:45‘,‘2014-03-01 02:30‘,‘2014-03-01 02:45‘,‘2014-03-01 03:00‘,‘2014-03-01 03:40‘,‘2014-03-01 04:50‘,‘2014-03-01 05:05‘,‘2014-03-01 06:06‘]";
options.xAxis.categories = eval(myTime);
//加载图表
chart = new Highcharts.Chart(options);
});
var options = {
chart: {
renderTo: ‘container‘,
zoomType: ‘x‘
},
title: {
text: ‘喊单收益曲线图‘
},
subtitle: {
text: ‘点击并拖动绘图区域的放大‘
},
xAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return this.value;
}
}
},
yAxis: {
title: {
text: ‘盈利率‘
},
labels: {
formatter: function () {
return this.value + "%";
}
},
startOnTick: false,
showFirstLabel: false
},
tooltip: {
formatter: function () {
return ‘‘ + ‘日期：‘ + this.x
+ ‘
盈利率：‘ + Highcharts.numberFormat(this.y, 2) + "%";
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, ‘#4572A7‘],
[1, ‘rgba(2,0,0,0)‘]
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: ‘area‘,
name: ‘盈利率‘
}]
}
</script>
详细说明：http://wp.662p.com/thread-8118-1-1.html
标签：style blog http io ar color sp java for
原文地址：http://www.cnblogs.com/huasili/p/4120184.html
