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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn