So implementieren Sie ein Liniendiagramm mit jQuery

So implementieren Sie ein Liniendiagramm mit jQuery_jquery

WBOY

Freigeben： 2016-05-16 16:11:59

Original

2013 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie man ein Liniendiagramm mit jQuery implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die Darstellung ist wie folgt:

js-Referenz:

Code kopieren Der Code lautet wie folgt:

Regelmäßig aktualisieren:

Code kopieren Der Code lautet wie folgt:

//Grafik 

AR-Diagramm; 

$(document).ready(function() { 

chart = new Highcharts.Chart({ 

Diagramm: { 

Renderto: 'Divchart', // Platzieren Sie den Container des Diagramms 

plotBackgroundColor: null, 

plotBorderWidth: null, 

                    defaultSeriesType: 'line' 

          }, 

Titel: { 

                  text: '24-Stunden-Lastkurve' 

          }, 

          Untertitel: {                                                
Text: '' 

          }, 

            xAxis: {//X-Achsen-Daten 

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

Beschriftungen: { 

                  Drehung: -45, //Schriftneigung 

ausrichten: 'rechts', 

Stil: { Schriftart: 'normal 12px 宋体' } 

          }, 

        yAxis: {//Y-Achsen-Anzeigetext 

Titel: { 

                                Text: 'MW'                                
                                                                                              
          }, 

Tooltip: { 

                                                         aktiviert: wahr,
Formatierer: function() { 

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

plotOptions: { 

Zeile: { 

dataLabels: { 

                                          aktiviert: wahr
                                                                                                                          
EnableMouSetracking: True // Ob Titel 

          }, 

Serie: [{ 

                Name: „Einheit 1“, 

Daten: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 ] 

          },{ 

Name: 'Einheit 2', 

Daten: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 ] 
         }]  

         });  

         Funktion getForm(){   

             $.ajax({  

                 Typ: „POST“,     //要用post方式       

                 URL: „WebServiceFH.asmx/GetLoadEveryHourByOne“,         

                 contentType: „application/json“,  

                 Daten: {},  

                 dataType: „json“,  

                 Erfolg: Funktion (Daten) {    

                     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"] ,data["Load21"],data["Load22"],data["Load23"]];   

                     chart.series[0].setData(data);   

                 },  

                 Fehler: Funktion (err) {   

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

                 }  

             });    

             $.ajax({  

                 Typ: „POST“,     //要用post方式       

                 URL: „WebServiceFH.asmx/GetLoadEveryHourByTwo“,         

                 contentType: „application/json“,   

                 dataType: „json“,  

                 Erfolg: Funktion (Daten) {    

                     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"] ,data["Load21"],data["Load22"],data["Load23"]];   

                     chart.series[1].setData(data);     

                 },  

                 Fehler: Funktion (err) {   

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

                 }  

             });   

         }  

         $(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.