jQuery jqPlot プラグインを使用して histogram_jquery を描画する

プロジェクトの開発プロセスでは、顧客に優れたエクスペリエンスを提供するために、アカウントの資金状況を表示する必要があり、描画プロセスはオリジナルのエコロジカルスクリプトを使用して描画されます。より面倒で時間がかかるため、時間を大幅に節約でき、ユーザーにすばやく表示できる描画用の jqPlot プラグインを選択しました。

プラグインの正式なアドレス: http://www.jqplot.com/

具体的な実装は次のとおりです。

JS ファイルの引用:

コードをコピーします コードは次のとおりです:

HTML コード

コードをコピーします コードは次のとおりです:

JavaScript:

コードをコピー コードは次のとおりです:

 var chartBar = function () {
         var data={param1:param1,param2:param2};//传递パラメータ
         $("#chart1").html("");//绘图DIV
         var s1;
         $.ajax({
             入力: "POST"、
             URL: '../Home/AccountSum',
             データ: データ、
             データ型: "json",
             非同期: false、
             成功: 関数 (d) {
                 if (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)];
                 } else {
                     s1 = [0.00, 0.00, 0.00, 0.00, 0.00, 0.00];
                 }
                 $.jqplot.config.enablePlugins = true;
                 var tiny = ['充值', '提款', '应收', '销售', '退票', '验证'];
                 var Lot1 = $.jqplot('chart1', [s1], {
                     // excanvas を使用していない場合にのみアニメーション化します (IE 7 または IE 8 では使用しません)..
                     //アニメーション化: !$.jqplot.use_excanvas,
                     シリーズデフォルト: {
                         pointLabels: { show: true },
                         シャドウ: false、
                         showMarker: true, // 否か强调表示図中のデータ节点
                         レンダラー: $.jqplot.BarRenderer,
                         rendererOptions: {
                             barWidth: 50、
                             バーマージン: 50
                         }
                     }、
                     軸: {
                         xaxis: {
                             show: true, //否か自動显示坐标轴
レンダラ: $.jqplot.CategoryAxisRenderer,
                                                                                                                                      ShowTicks: true, // 座標軸に目盛りとスケール値を表示するかどうか
showTickMarks: true, //ティックを表示するかどうかを設定します
10個の債券から出てください：{
表示: true、
fontSize: '14px'、
fontFamily: 'tahoma,arial,"Hiragino Sans GB",宋体b8b体,sans-serif',
showLabel: true, //座標軸に目盛りやスケール値を表示するかどうか
showMark: false, //スケールを表示するかどうかを設定
ShowGridline: false // チャートエリアにスケール値の方向にグリッドを表示するかどうか
}                                                                                                                                       yaxis: {
表示: true、
ShowTicks: false, // 座標軸に目盛りとスケール値を表示するかどうか
showTickMarks: false, //ティックを表示するかどうかを設定します
自動スケール: true、
borderWidth: 1,
10個の債券から出てください：{
表示: true、
showLabel: false、
showMark: false、
showGridline: true、
formatString: '￥%.2f'
}                                                                                                                                       },
グリッド: {
drawGridLines: true、
drawBorder: false,
シャドウ: false、
bordercolor： '＃000000'、//チャートの（最も外側の）境界線の色を設定
BorderWidth: 1 // グラフ（外側）の枠線の幅を設定します
},
ハイライター: { show: false }
});
},
エラー: function () {
alert("グラフィック統計の取得に失敗しました!");
}
});
};


レンダリング:

今日はここまでです。公式のサンプルをざっと見てみたところ、この機能は非常に強力で、非常に便利で使いやすいことがわかりました。このプロジェクトのニーズに応じて、将来さらに追加される可能性があります。しかし、使用中にいくつかの問題も発見され、部分的な実装では満足できない可能性があります。