溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jquer 獲取json數(shù)據(jù)，并且用 highcharts 實(shí)現(xiàn)展現(xiàn)

發(fā)布時(shí)間：2020-06-29 01:34:24 來源：網(wǎng)絡(luò) 閱讀：1005 作者：tianshuai369 欄目：web開發(fā)

json數(shù)據(jù)格式如下:

{

   "value": [
        23,
        4,
	24,
	95,
	27,
	35,
	93,
	63,
	75,
	17,
	13,
	93,
	54,
	71,
	61,
	14,
	13,
        14,
        29
    ]

  

}

需要highcharts的dark-blue.js文件

html文件格式如下：

<!doctype html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
  <script type="text/javascript" src="dark-blue.js"></script>
  <script>
  $(document).ready(function() {
    $.getJSON('http://1.1.1.1:800/1.json', { }, function (json_data) {
    //左側(cè)Javascript代碼
 $(function () {                                                                     
    $(document).ready(function() {                                                  
        Highcharts.setOptions({                                                     
            global: {                                                               
                useUTC: false                                                       
            }                                                                       
        });                                                                         
                                                                                    
        var chart;                                                                  
        $('#container').highcharts({                                                
            chart: {                                                                
                type: 'spline',                                                     
                animation: Highcharts.svg,             
                marginRight: 10,                                                    
                events: {                                                           
                                                                           
                }                                                                   
            },                                                                      
            title: {                                                                
                text: '流量圖'                                            
            },                                                                      
            xAxis: {   
    title: {                                                            
                    text: '時(shí)間'                                                   
                },
                type: 'datetime',                                                   
                tickPixelInterval: 150                                              
            },
   credits: {          
    enabled:false
   },  
            yAxis: {                                                                
                title: {                                                            
                    text: '單位/M'                                                   
                },                                                                  
                plotLines: [{                                                       
                    value: 0,                                                       
                    width: 1,                                                       
                    color: '#808080'                                                
                }]                                                                  
            },                                                                      
            tooltip: {                                                              
                formatter: function() {                                             
                        return '<b>'+ this.series.name +'</b><br/>'+                
                        Highcharts.dateFormat("時(shí)間:"+ '%m-%d %H:%M:%S', this.x) +'<br/>'+
                        "數(shù)據(jù):" + Highcharts.numberFormat(this.y, 2);                         
                }                                                                   
            },   
   
            legend: {                                                               
                enabled: false                                                      
            },                                                                      
            exporting: {                                                            
                enabled: false                                                      
            },                                                                      
            series: [{                                                              
                name: '實(shí)時(shí)數(shù)據(jù)',                                                
                data: (function() {  
                    // generate an array of random data                             
                    var data = [],                                                  
                        time = (new Date()).getTime(),                            
                      length=((json_data.value).length)+1;
      
     $.each(json_data.value, function(i, value) {      
         data.push({                                                 
                            x: time - length * 1000, 
                            y: value                                       
                        }); 
      length--;      
     });                                                                  
                    return data;                                                    
                })()                                                                
            }]                                                                      
        });                                                                         
    });                                                                             
                                                                                    
});  
}); 
});                                                                                    
  </script>
</head>
<body>
  <div id="container" ></div>
</body>
</html>

最終展現(xiàn)效果如下：

jquer 獲取json數(shù)據(jù)，并且用 highcharts 實(shí)現(xiàn)展現(xiàn)

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手