Utilisez le plug-in jQuery jqPlot pour dessiner histogram_jquery

Pendant le processus de développement d'un projet, il est nécessaire d'afficher l'état des fonds du compte. Afin de donner aux clients une bonne expérience, nous utilisons des graphiques en colonnes pour l'afficher si le processus de dessin est dessiné à l'aide de scripts écologiques originaux. , ce sera plus fastidieux et plus long, nous avons donc choisi le plug-in jqPlot pour le dessin, qui peut faire gagner beaucoup de temps et peut être affiché rapidement aux utilisateurs.

Adresse officielle du plug-in : http://www.jqplot.com/

La mise en œuvre spécifique est la suivante :

Citant des fichiers JS :

Copier le code Le code est le suivant :

Code HTML

Copier le code Le code est le suivant :

Javascript :

Copier le code Le code est le suivant :

 var chartBar = fonction () {
         var data={param1:param1,param2:param2};//传递参数
         $("#chart1").html("");//绘图DIV
         vars1;
         $.ajax({
             tapez : "POST",
             url : '../Accueil/CompteSum',
             données : données,
             type de données : "json",
             asynchrone : faux,
             succès : fonction (d) {
                 si (d.flag) {
                     s1 = [parseFloat(d.data.Total1), parseFloat(d.data.Total2), parseFloat(d.data.Total3), parseFloat(d.data.Total4), parseFloat(d.data.Total5), parseFloat( d.data.Total6)];
                 } autre {
                     s1 = [0,00, 0,00, 0,00, 0,00, 0,00, 0,00];
                 >
                 $.jqplot.config.enablePlugins = true;
                 var ticks = ['充值', '提款', '应收', '销售', '退票', '验证'];
                 var plot1 = $.jqplot('chart1', [s1], {
                     // Animer uniquement si nous n'utilisons pas excanvas (pas dans IE 7 ou IE 8)..
                     //animer : !$.jqplot.use_excanvas,
                     sériesPar défaut : {
                         pointLabels : {show : true},
                         ombre : fausse,
                         showMarker : true, // 是否强调显示图中的数据节点
                         moteur de rendu : $.jqplot.BarRenderer,
                         Options de rendu : {
                             largeur de la barre : 50,
                             Marge de barre : 50
                         >
                     },
                     axes : {
                         axe x : {
                             show : vrai,    //是否自动显示坐标轴
moteur de rendu : $.jqplot.CategoryAxisRenderer,
                                                                                                                                      ShowTicks : true, // Afficher ou non les graduations et les valeurs d'échelle sur l'axe de coordonnées
showTickMarks : true, //Définir s'il faut afficher les ticks
                                                                                                                            sur 10 tickOptions : {
montrer : vrai,
                                                                         Taille de la police : '14px',
                       fontFamily : 'tahoma,arial,"Hiragino Sans GB",宋体b8b体,sans-serif',
showLabel : true, //S'il faut afficher les graduations et les valeurs d'échelle sur l'axe de coordonnées
showMark : false, //Définir s'il faut afficher l'échelle
ShowGridline : false // S'il faut afficher la grille dans la zone graphique dans le sens de la valeur de l'échelle
                                                                                                            }                                                                                                                                                            yaxis : {
montrer : vrai,
ShowTicks : false, // Afficher ou non les graduations et les valeurs d'échelle sur l'axe de coordonnées
showTickMarks : false, //Définir s'il faut afficher les ticks
mise à l'échelle automatique : vrai,
borderWidth : 1,
                                                                                                                            sur 10 tickOptions : {
montrer : vrai,
showLabel : faux,
showMark : faux,
showGridline : vrai,
formatString : '￥%.2f'
                                                                                                            }                                                                                                                                                            },
grille : {
drawGridLines : vrai,
                         drawBorder : false,
                       ombre : fausse,
                                                                                                                                                                     borderColor : '#000000',         // Définir la couleur de la bordure (la plus extérieure) du graphique
BorderWidth : 1 // Définit la largeur de la bordure du graphique (côté extérieur)
                     },
                     surligneur : { show : false }
                 });
             },
             erreur : fonction () {
alert("Échec de l'obtention des statistiques graphiques !");
            }
          });
};


Rendu :

C'est tout pour aujourd'hui. J'ai jeté un coup d'œil préliminaire aux exemples officiels et j'ai trouvé que la fonction est assez puissante et très pratique et facile à utiliser. Selon les besoins de ce projet, d'autres pourraient être ajoutées à l'avenir. Cependant, certains problèmes ont également été découverts lors de l'utilisation, et une mise en œuvre partielle peut ne pas être satisfaisante.