Highcharts写时序图（大数据量交换）

来源：互联网发布：金蝶软件数据库编辑：程序博客网时间：2024/06/06 11:48

哈罗，大家好！最近一直在忙工作啊！更新比较慢- -，这段时间遇到了一个问题，就是把数据库的数据用图表的形式展示出来，但是一般的图表只能展示出某个时段的数据，但是我想要的是就像股票走势图一样即时的把数据显示出来，然后经过找各方面的资料，终于完成！下面给大家看一下效果图：

是不是觉得很漂亮，其中还自带了搜索范围，这个我喜欢，然后下面就把代码呈上（这个是用highcharts插件做的，要的话自己去官网下载或者联系我，QQ：71124324）：

<script type="text/javascript">

//这个是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<br/>%H:%M:%S',minute: '%Y-%m-%d<br/>%H:%M',hour: '%Y-%m-%d<br/>%H:%M',day: '%Y<br/>%m-%d',week: '%Y<br/>%m-%d',month: '%Y-%m',year: '%Y'}},series : [{name : '测试1',data : seconddata},{name: '测试2',data: seconddat}]});});</script><div id="action"></div>  //就是在这里面显示

好了，以上代码记得引用jquery.js和highcharts.js，别忘了！

0 0