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;                 
                })() 
           }]         
        });     
    });      
});

 

附上兩張靜態效果圖，也可以查看 →.→  動態效果 ←.←