Gunakan jQuery jqPlot plug-in untuk melukis histogram_jquery

Semasa proses pembangunan projek, adalah perlu untuk memaparkan status dana akaun Untuk memberikan pelanggan pengalaman yang baik, kami menggunakan grafik kolumnar untuk memaparkannya Jika proses lukisan dilukis menggunakan skrip ekologi asal , ia akan menjadi lebih menyusahkan dan memakan masa, jadi Kami memilih pemalam jqPlot untuk lukisan, yang boleh menjimatkan banyak masa dan boleh dipaparkan kepada pengguna dengan cepat.

Alamat rasmi pemalam: http://www.jqplot.com/

Pelaksanaan khusus adalah seperti berikut:

Memetik fail JS:

Salin kod Kod adalah seperti berikut:

Kod html

Salin kod Kod adalah seperti berikut:

Javascript:

Salin kod Kod adalah seperti berikut:

 var chartBar = fungsi () {
         var data={param1:param1,param2:param2};//传递参数
         $("#chart1").html("");//绘图DIV
         var s1;
         $.ajax({
             taip: "POST",
             url: '../Home/AccountSum',
             data: data,
             jenis data: "json",
             async: palsu,
             kejayaan: fungsi (d) {
                 jika (d.bendera) {
                     s1 = [parseFloat(d.data.Total1), parseFloat(d.data.Total2), parseFloat(d.data.Total3), parseFloat(d.data.Total4), parseFloat(d.data.Total5), parseFloat( d.data.Jumlah6)];
                 } lain {
                     s1 = [0.00, 0.00, 0.00, 0.00, 0.00, 0.00];
                 }
                 $.jqplot.config.enablePlugins = benar;
                 var ticks = ['充值', '提款', '应收', '销售', '退票', '验证'];
                 var plot1 = $.jqplot('carta1', [s1], {
                     // Hanya hidupkan jika kita tidak menggunakan excanvas (bukan dalam IE 7 atau IE 8)..
                     //animate: !$.jqplot.use_excanvas,
                     seriesDefaults: {
                         pointLabels: { tunjukkan: benar },
                         bayang: palsu,
                         showMarker: benar, // 是否强调显示图中的数据节点
                         pemapar: $.jqplot.BarRenderer,
                         rendererOptions: {
                             barLebar: 50,
                             barMargin: 50
                         }
                     },
                     paksi: {
                         xaxis: {
                             tunjukkan: benar,    //是否自动显示坐标轴
pemapar: $.jqplot.CategoryAxisRenderer,
                                                                                                                                                                                                                                               ShowTicks: benar, // Sama ada mahu memaparkan tanda semak dan nilai skala pada paksi koordinat
showTickMarks: benar, //Tetapkan sama ada untuk memaparkan kutu
… 🎜> Tunjukkan: benar,
                                                                            Saiz fon: '14px',
                        fonFamily: 'tahoma,arial,"Hiragino Sans GB",宋体b8b体,sans-serif',
showLabel: true, //Sama ada mahu memaparkan tanda semak dan nilai skala pada paksi koordinat
showMark: false, //Tetapkan sama ada hendak memaparkan skala
ShowGridline: false // Sama ada hendak memaparkan grid dalam kawasan carta mengikut arah nilai skala
                                                                                                                                                                                                                                                                                                                                                                                                                                           yaxis: {
tunjukkan: benar,
ShowTicks: palsu, // Sama ada mahu memaparkan tanda semak dan nilai skala pada paksi koordinat
showTickMarks: false, //Tetapkan sama ada untuk memaparkan kutu
skala auto: benar,
lebar sempadan: 1,
                                                                                                                                                                                                                                                                                                                                      keluar     Tunjukkan: benar,
showLabel: palsu,
showMark: palsu,
showGridline: benar,
formatString: '￥%.2f'
                                                                                                                                                                                                                                                                                                                                                                                                                                          },
grid: {
drawGridLines: benar,
                         drawBorder: palsu,
                        bayang: palsu,
BorderColor: '#000000', // Tetapkan warna bingkai (luar) carta
BorderWidth: 1 // Tetapkan graf (sebelah luar) lebar sempadan
                     },
                     penyerlah: { tunjukkan: palsu }
                 });
             },
             ralat: fungsi () {
alert("Gagal mendapatkan statistik grafik!");
            }
          });
};


Penyampaian:

Itu sahaja untuk hari ini, saya telah melihat contoh rasmi dan mendapati bahawa fungsi ini agak berkuasa dan sangat mudah digunakan mengikut keperluan projek ini, beberapa lagi mungkin akan ditambah pada masa hadapan. Walau bagaimanapun, beberapa masalah juga ditemui semasa penggunaan, dan pelaksanaan separa mungkin tidak memuaskan.