Use jQuery jqPlot plug-in to draw histogram_jquery

 var chartBar = function () {
         var data={param1:param1,param2:param2};//传递参数
         $("#chart1").html("");//绘图DIV
         var s1;
         $.ajax({
             type: "POST",
             url: '../Home/AccountSum',
             data: data,
             datatype: "json",
             async: false,
             success: function (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 ticks = ['充值', '提款', '应收', '销售', '退票', '验证'];
                 var plot1 = $.jqplot('chart1', [s1], {
                     // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
                     //animate: !$.jqplot.use_excanvas,
                     seriesDefaults: {
                         pointLabels: { show: true },
                         shadow: false,
                         showMarker: true, // 是否强调显示图中的数据节点
                         renderer: $.jqplot.BarRenderer,
                         rendererOptions: {
                             barWidth: 50,
                             barMargin: 50
                         }
                     },
                     axes: {
                         xaxis: {
                             show: true,    //是否自动显示坐标轴
renderer: $.jqplot.CategoryAxisRenderer,
                                                                                                                                      ShowTicks: true, // Whether to display tick marks and scale values ​​on the coordinate axis
showTickMarks: true, //Set whether to display ticks
                                                                                                                                            out out out out of 10 tickOptions: {
show: true,
                                                                          fontSize: '14px',
                       fontFamily: 'tahoma,arial,"Hiragino Sans GB",宋体b8b体,sans-serif',
showLabel: true, //Whether to display tick marks and scale values ​​on the coordinate axis
showMark: false, //Set whether to display the scale
ShowGridline: false // Whether to display the grid in the chart area in the direction of the scale value
                                                                                                            }                                                                                                                                                            yaxis: {
show: true,
ShowTicks: false, // Whether to display tick marks and scale values ​​on the coordinate axis
showTickMarks: false, //Set whether to display ticks
autoscale: true,
borderWidth: 1,
                                                                                                                                            out out out out of 10 tickOptions: {
show: true,
showLabel: false,
showMark: false,
showGridline: true,
formatString: '￥%.2f'
                                                                                                            }                                                                                                                                                            },
grid: {
drawGridLines: true,
                         drawBorder: false,
                       shadow: false,
                                                                                                                                                                     borderColor: '#000000',         // Set the color of (outermost) border of the chart
BorderWidth: 1 // Set the graph (outer side) border width
                     },
                     highlighter: { show: false }
                 });
             },
             error: function () {
alert("Failed to obtain graphic statistics!");
            }
          });
};


Rendering: