So implementieren Sie ein Liniendiagramm mit jQuery_jquery

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.