Bagaimana untuk melaksanakan carta baris dengan jQuery

Bagaimana untuk melaksanakan carta baris dengan jQuery_jquery

WBOY

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

asal

2012 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara melaksanakan carta garis dengan jQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Rendering adalah seperti berikut:

rujukan js:

Salin kod Kod adalah seperti berikut:

Segarkan secara kerap:

Salin kod Kod adalah seperti berikut:

//Graf 

carta ar; 

$(dokumen).sedia(fungsi() { 

carta = Carta Tinggi baharu. Carta({ 

carta: { 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           renderTo: 'divChart',
plotLatar BelakangWarna: null, 

plotBorderWidth: batal, 

                    defaultSeriesType: 'line' 

          }, 

tajuk: { 

                  teks: 'Keluk beban 24 jam' 

          }, 

          sari kata: {                                                 
teks: '' 

          }, 

            xAxis: {//X-axis data 

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

label: { 

                  putaran: -45, //Condongkan fon 

selaraskan: 'kanan', 

gaya: { fon: 'normal 12px 宋体' } 

          }, 

        yAxis: {//Y-axis paparan teks 

tajuk: { 

                                teks: 'MW'                                  
                                                                                                                                                  
          }, 

petua alat: { 

                                                         didayakan: benar,
Pemformat: function() { 

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

Pilihan plot: { 

Baris: { 

DataLabels: { 

                                           didayakan: benar
                                                                                                                                                                                                                                          
EnableMouSetracking: Benar // Sama ada Tajuk 

          }, 

siri: [{ 

                nama: 'Unit 1', 

data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 ] 

          },{ 

nama: 'Unit 2', 

data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 ] 
         }]  

         });  

         fungsi getForm(){   

             $.ajax({  

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

                 url: "WebServiceFH.asmx/GetLoadEveryHourByOne",         

                 contentType: "application/json",  

                 data: {},  

                 dataType: "json",  

                 kejayaan: fungsi (data) {    

                     var data = [data["Muat0"],data["Muat1"],data["Muat2"],data["Muat3"],data["Muat4"],data["Muat5"],data["Muat6 "],data["Muat7"],data["Muat8"],data["Muat9"],data["Muat10"],data["Muat11"],data["Muat12"],data["Muat13" ],data["Muat14"],data["Muat15"],data["Muat16"],data["Muat17"],data["Muat18"],data["Muat19"],data["Muat20"] ,data["Muat21"],data["Muat22"],data["Muat23"]];   

                     carta.siri[0].setData(data);   

                 },  

                 ralat: fungsi (err) {   

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

                 }  

             });    

             $.ajax({  

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

                 url: "WebServiceFH.asmx/GetLoadEveryHourByTwo",         

                 contentType: "application/json",   

                 dataType: "json",  

                 kejayaan: fungsi (data) {    

                     var data = [data["Muat0"],data["Muat1"],data["Muat2"],data["Muat3"],data["Muat4"],data["Muat5"],data["Muat6 "],data["Muat7"],data["Muat8"],data["Muat9"],data["Muat10"],data["Muat11"],data["Muat12"],data["Muat13" ],data["Muat14"],data["Muat15"],data["Muat16"],data["Muat17"],data["Muat18"],data["Muat19"],data["Muat20"] ,data["Muat21"],data["Muat22"],data["Muat23"]];   

                     carta.siri[1].setData(data);     

                 },  

                 ralat: fungsi (err) {   

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

                 }  

             });   

         }  

         $(document).ready(function() {    
                           // Rufen Sie die Methode automatisch alle 3 Sekunden auf, um eine Echtzeitaktualisierung des Diagramms zu realisieren 

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

});

Hinweis hier:

Code kopieren Der Code lautet wie folgt: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);

Nur im Text erforderlich:

Code kopieren Der Code lautet wie folgt:

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird. 