Comment implémenter un graphique linéaire avec jQuery

Comment implémenter un graphique linéaire avec jQuery_jquery

WBOY

Libérer： 2016-05-16 16:11:59

original

1996 Les gens l'ont consulté

L'exemple de cet article décrit comment implémenter un graphique linéaire avec jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Le rendu est le suivant :

référence js :

Copier le code Le code est le suivant :

Actualiser régulièrement :

Copier le code Le code est le suivant :

//Graphique 

ar graphique 

$(document).ready(function() { 

chart = nouveau Highcharts.Chart({ 

graphique : { 

Renderto : 'Divchart', // Placer le conteneur du graphique 

plotBackgroundColor : null, 

plotBorderWidth : null, 

                    defaultSeriesType : 'line' 

          }, 

titre : { 

                  texte : « Courbe de charge sur 24 heures » 

          }, 

          sous-titre : {                                                
texte : '' 

          }, 

            xAxis : {//données sur l'axe X 

catégories : ['00','01', '02','03', '04','05', '06','07', '08','09', '10','11' , '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'], 

étiquettes : { 

                  rotation : -45, //Inclinaison de la police 

aligner : 'à droite', 

style : { font : 'normal 12px 宋体' } 

          }, 

        yAxis : {//le texte affiché sur l'axe Y 

titre : { 

                                texte : 'MW'                                 
                                                                                                    
          }, 

info-bulle : { 

                                                        activé : vrai,
Formateur : function() { 

                      return '' this.x '
' this.series.name ': ' Highcharts.numberFormat(this.y, 1);
                                                                                                    
          }, 

plotOptions : { 

Ligne : { 

étiquettes de données : { 

                                           activé : vrai
                                                                                                                                 
EnableMouSetracking : True // Que ce soit le titre 

          }, 

série : [{ 

                nom : 'Unité 1', 

données : [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 ] 

          },{ 

nom : 'Unité 2', 

données : [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 ] 
         }]  

         });  

         fonction getForm(){   

             $.ajax({  

                 tapez : "POST",     //要用post方式       

                 URL : "WebServiceFH.asmx/GetLoadEveryHourByOne",         

                 contentType : "application/json",  

                 données : {},  

                 Type de données : "json",  

                 succès : fonction (données) {    

                     var data = [data["Load0"],data["Load1"],data["Load2"],data["Load3"],data["Load4"],data["Load5"],data["Load6" "],data["Load7"],data["Load8"],data["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13" ],data["Load14"],data["Load15"],data["Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"] ,données["Charge21"],données["Charge22"],données["Charge23"]];   

                     chart.series[0].setData(données);   

                 },  

                 erreur : fonction (err) {   

                     alert("读取数据出错！");  

                 }  

             });    

             $.ajax({  

                 tapez : "POST",     //要用post方式       

                 URL : "WebServiceFH.asmx/GetLoadEveryHourByTwo",         

                 contentType : "application/json",   

                 Type de données : "json",  

                 succès : fonction (données) {    

                     var data = [data["Load0"],data["Load1"],data["Load2"],data["Load3"],data["Load4"],data["Load5"],data["Load6" "],data["Load7"],data["Load8"],data["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13" ],data["Load14"],data["Load15"],data["Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"] ,données["Charge21"],données["Charge22"],données["Charge23"]];   

                     chart.series[1].setData(données);     

                 },  

                 erreur : fonction (err) {   

                     alert("读取数据出错！");  

                 }  

             });   

         }  

         $(document).ready(function() {    
                           // Appelez automatiquement la méthode toutes les 3 secondes pour réaliser une mise à jour en temps réel du graphique 

                         getForm();                                                
                  window.setInterval(getForm,600000);                             
           });  
});

Notez ici :

Copier le code Le code est le suivant :var data = [data["Load0"],data["Load1 "], données["Load2"],data["Load3"],data["Load4"],data["Load5"],data["Load6"],data["Load7"],data["Load8" ],données ["Charge9"],données["Charge10"],données["Charge11"],données["Charge12"],données["Charge13"],données["Charge14"],données["Charge15"] ,data["Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"],data["Load21"],data["Load22"], données[" Load23 "]]; chart.series[0].setData(data);

Requis uniquement dans le corps :

Copier le code Le code est le suivant :

J'espère que cet article sera utile à la programmation jQuery de chacun.