Comment implémenter un graphique linéaire avec jQuery_jquery

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn