首页 > 代码库 > HighCharts 图表插件 自定义绑定 时间轴数据
HighCharts 图表插件 自定义绑定 时间轴数据
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="http://www.mamicode.com/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="http://www.mamicode.com/highcharts.js" type="text/javascript"></script> <script src="http://www.mamicode.com/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 = "", myDatahttp://www.mamicode.com/= ""; $(function () { //盈利率 myDatahttp://www.mamicode.com/= "[-20.25,-12.30,-3.68,5.45,19.00,-2.78,-5.45,9.80,10.45,16.15]"; options.series[0].data = http://www.mamicode.com/eval(myData);"[‘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
HighCharts 图表插件 自定义绑定 时间轴数据
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。