Bagaimana untuk melaksanakan carta baris dengan jQuery_jquery

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.

Label berkaitan：

jquery 折线图 方法

sumber：php.cn

Artikel sebelumnya：Perkara yang perlu diambil perhatian tentang nilai lalai kotak kombo dalam EasyUI_jquery Artikel seterusnya：Contoh penggunaan split dan replace dalam kemahiran js_javascript

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

• Apakah itu NullPointerException, dan bagaimana saya membetulkannya?
  2024-10-22 09:46:29
• Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C
  2024-10-13 13:53:41
• Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula
  2024-10-12 12:15:51
• Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu
  2024-10-11 22:47:31
• Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak
  2024-10-11 19:36:51
• Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak
  2024-10-11 15:50:41
• Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula
  2024-10-11 15:07:41
• PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web
  2024-10-11 14:21:21
• Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda
  2024-10-11 12:59:11
• Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula
  2024-10-11 12:17:31

Isu terkini

Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...

daripada 2024-04-06 14:54:03

0

2

421

Bagaimana untuk mendapatkan semula nilai baris yang tidak dipilih dalam jadual data HTML menggunakan jquery Saya cuba mendapatkan nilai semua baris di mana butang tidak diklik. Sebagai contoh, apabi...

daripada 2024-04-05 09:26:49

0

1

1418

Perlukan skrip jquery untuk mengalihkan pilihan yang dipilih dari kotak pilihan berdasarkan pemilihan semasa pengguna akhir Saya mempunyai halaman HTML di mana pengguna akhir boleh meletakkan kedudukan item kami me...

daripada 2024-04-04 18:40:04

0

1

3528

Saya telah mencipta elemen dalam CSS tulen melalui penanda halaman. Ia dicipta tetapi tidak kelihatan Kod saya adalah seperti berikut: g=document.createElement('div');g.setAttribute("id&q...

daripada 2024-04-04 17:27:27

0

1

417

Tidak dapat menghantar data borang pada iOS Safari/Firefox Ini berfungsi pada semua platform kecuali Safari/Firefox pada iOS: jQuery("#gform_1&q...

daripada 2024-04-04 12:53:48

0

1

303

Topik-topik yang berkaitan

Lagi>

• Apakah pemalam jquery?
• Bagaimana untuk mengendalikan json dengan jquery
• Bagaimana untuk memadam elemen dalam jquery
• Penggunaan kaedah jQuery hover().
• jquery melaksanakan kaedah paging
• Apakah elemen tersembunyi dalam jquery
• Apa yang ditonjolkan dalam jquery
• Prestasi mikrokomputer terutamanya bergantung kepada