现在位置首页 / 项目实战 /正文

js报表插件:highchart 实现动态刷新(可用于制作股票时时走势/心跳图)

作者: IT小兵 | 2015年3月18日| 热度:℃ | 评论: |参与:

在前端开发的文章中,介绍了给予jquery的心跳图插件:[jQuery Sparklines线状图、波谱图、心跳图插件使用说明]。今天分享一个关于js报表插件:highchart 实现动态刷新(可用于制作股票时时走势/心跳图)的文章。

效果图:

最近项目中要求获取时时的cpu动态图,利用 highchart 可以轻松实现该功能,效果可在此地址查看:动态效果

 

代码如下: 

页面 js 引用: 

  <script src="你项目js的所在目录/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="你项目js的所在目录/highcharts/highcharts.js" type="text/javascript"></script>

创建一个div :

<div id="syscharts" style="width:100%;height:500px;"></div>

javascript 代码:

$(function () {   
    var k=0;  
    $(document).ready(function() { 
        $('#syscharts').highcharts({             
            chart: {//设置背景色       
                backgroundColor: {       
                    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },      
                    stops: [       
                        [0, 'rgb(0, 0, 0)'],      
                        [1, 'rgb(0, 0, 0)']      
                    ]
                },
                //设置放大的方向 可以是x或者y     
                zoomType: 'xy',         
                //设置绘图区域边框颜色和宽度 
                plotBorderColor: '#008800',     
                plotBorderWidth: 0,     
                shadow:true,                  
                //设置动画效果                  
                animation: Highcharts.svg,                 
                //左边距和右边距                  
                marginRight: 20,     
                borderColor: '#008800',      
                borderWidth: 1,                 
                events: {                      
                    load: function() {                                                 
                        var series = this.series[0]; 
                        var old = 0;                      
                        setInterval(function() {     
                            var x =(k++);
                            var y = Math.random()*100;
                            while(y-old>=10 || y - old <= -10){
                                y = Math.random()*100;
                            }
                            old = y;
                            series.addPoint([x, parseInt(y)], true, true); 
                        }, 1000);                     
                    }                 
                }             
            }, 
            title: {       
                text:"CPU",       
                style: {        
                    color: '#FFFFFF',        
                    font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'       
                }        
            },
            xAxis: {      
                tickInterval: 5,      
                gridLineColor: '#008800',      
                gridLineWidth: 1,      
                lineWidth:0,      
                labels:{ 
                    formatter: function() { return ""; },      
                    step:1
                },                 
            },             
            yAxis: [{    
                tickInterval: 10,   
                gridLineColor: '#008800',     
                gridLineWidth: 1,     
                min:0,     
                max:100,                 
                labels: {                      
                    formatter: function() {                         
                        return this.value +"%";                     
                    },                             
                    style: {                          
                        color: '#FFFFFF'                     
                    }                 
                },                  
                title: {  text: ''  },                  
                opposite: false             
            }],              
            tooltip: {       
                shared: false,
                valueDecimals : 0             
            },              
            legend: {                  
                enabled: true                 
            },              
            exporting: {                  
                enabled: false             
            },       
            plotOptions: {                 
                area: {                 
                    marker: {                          
                        enabled: false,                         
                        symbol: 'circle',                         
                        radius: 2,                         
                        states: {                             
                            hover: {                                  
                                enabled: true                             
                            }                         
                        }                     
                    }                 
                },                  
                line: {                      
                    marker: {                          
                        enabled: false,
                        symbol: 'circle',                         
                        radius: 1,                        
                        states: {                             
                            hover: {                                  
                                enabled: true                             
                            }                         
                        }                     
                    }                 
                }             
            },
            credits:{ enabled:false},                          
            series: [{                  
                    name: 'CPU使用率',                 
                    type: 'area',//line 则为不填充折线样式                  
                    color: '#0000FF',     
                    yAxis: 0,                   
                    data: (function() {                 
                        var data = [], i;                            
                        for (i = -300; i <= 0; i++) {                         
                            data.push({                              
                                x: i,                             
                                y: 0                         
                            });                    
                        }                       
                        return data;                 
                })() 
           }]         
        });     
    });      
});


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询