哈罗,大家好!最近一直在忙工作啊!更新比较慢- -,这段时间遇到了一个问题,就是把数据库的数据用图表的形式展示出来,但是一般的图表只能展示出某个时段的数据,但是我想要的是就像股票走势图一样即时的把数据显示出来,然后经过找各方面的资料,终于完成!下面给大家看一下效果图:
是不是觉得很漂亮,其中还自带了搜索范围,这个我喜欢,然后下面就把代码呈上(这个是用highcharts插件做的,要的话自己去官网下载或者联系我,QQ:71124324):
//这个是demo我就自定义了变量。这些都是在后台取得数据哈,我这只是一个demo,切记,切记。
var eval;
var seconddata = [[Date.UTC(2014,7-1,01),159444],[Date.UTC(2014,7-1,02),159432],[Date.UTC(2014,7-1,03),159940],[Date.UTC(2014,7-1,04),160175],[Date.UTC(2014,7-1,05),160264],[Date.UTC(2014,7-1,06),160485],[Date.UTC(2014,7-1,07),155318],[Date.UTC(2014,7-1,08),150165],[Date.UTC(2014,7-1,09),156588],[Date.UTC(2014,7-1,10),157872],[Date.UTC(2014,7-1,11),158371],[Date.UTC(2014,7-1,12),159079],[Date.UTC(2014,7-1,13),159030],[Date.UTC(2014,7-1,14),155567],[Date.UTC(2014,7-1,15),154002],[Date.UTC(2014,7-1,16),158375],[Date.UTC(2014,7-1,17),159215],[Date.UTC(2014,7-1,18),159235],[Date.UTC(2014,7-1,19),159366],[Date.UTC(2014,7-1,20),159327],[Date.UTC(2014,7-1,21),158659],[Date.UTC(2014,7-1,22),158087],[Date.UTC(2014,7-1,23),149087],[Date.UTC(2014,7-1,24),157067],[Date.UTC(2014,7-1,25),128087],[Date.UTC(2014,7-1,26),162087],[Date.UTC(2014,7-1,27),150087],[Date.UTC(2014,7-1,28),118087],[Date.UTC(2014,7-1,29),118287],[Date.UTC(2014,7-1,30),128087],[Date.UTC(2014,8-1,01),158087],[Date.UTC(2014,8-1,02),148287],[Date.UTC(2014,8-1,22),168287],];
var seconddat=[[Date.UTC(2014,7-1,01),124675],[Date.UTC(2014,7-1,02),121365],[Date.UTC(2014,7-1,03),120725],[Date.UTC(2014,7-1,04),124919],[Date.UTC(2014,7-1,05),125435],[Date.UTC(2014,7-1,06),125779],[Date.UTC(2014,7-1,07),125915],[Date.UTC(2014,7-1,08),125848],[Date.UTC(2014,7-1,09),123138],[Date.UTC(2014,7-1,10),121546],[Date.UTC(2014,7-1,11),125315],[Date.UTC(2014,7-1,12),126393],[Date.UTC(2014,7-1,13),126490],[Date.UTC(2014,7-1,14),126506],[Date.UTC(2014,7-1,15),126345],[Date.UTC(2014,7-1,16),123921],[Date.UTC(2014,7-1,17),123237],[Date.UTC(2014,7-1,18),126428],[Date.UTC(2014,7-1,19),126997],[Date.UTC(2014,7-1,20),127120],[Date.UTC(2014,7-1,21),127248],[Date.UTC(2014,7-1,22),127551],[Date.UTC(2014,7-1,23),124418],[Date.UTC(2014,7-1,24),123767],[Date.UTC(2014,7-1,25),127265],[Date.UTC(2014,7-1,26),187951],];
$(function() {
Highcharts.setOptions({
lang: {
months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
}
});
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
tooltip : {
xDateFormat: "%Y/%m/%d %A"
},
xAxis: {
dateTimeLabelFormats: {
second: '%Y-%m-%d
%H:%M:%S',
minute: '%Y-%m-%d
%H:%M',
hour: '%Y-%m-%d
%H:%M',
day: '%Y
%m-%d',
week: '%Y
%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
series : [{
name : '测试1',
data : seconddata
},{
name: '测试2',
data: seconddat
}]
});
});
//就是在这里面显示
好了,以上代码记得引用jquery.js和highcharts.js,别忘了!