利用 JQuery easyUI Highcharts实现数据柱状图 
准备工作：
引入js：
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="highcharts.js"></script>
<script language="javascript" type="text/javascript" src="exporting.js"></script>
前端代码：
<script type="text/javascript"> 
      /*获取json数据开始*/ 
      //定义变量 
      $(document).ready(function () { 
          var jsonXData = []; 
          var jsonyD1 = []; 
          var jsonyD2 = []; 
        //获取数据 
          $.ajax({ url: '/ciccpsMember/memberfee/memberfeeByYear', 
              cache: false, 
              async: false, 
              success: function (data) { 
                  var json = eval("(" + data + ")"); 

                  if (json.Rows.length > 0) { 
                      for (var i = 0; i < json.Rows.length; i++) { 
                          var rows = json.Rows[i]; 
                          var Year = ar; 
                          var ShouldPay = rows.shouldPay; 
                          var TruePay = uePay; 
                          jsonXData.push(Year); //赋值 
                          jsonyD1.push(ShouldPay); 
                          jsonyD2.push(TruePay); 
                      } //for 
                      var chart; 
                      chart = new Highcharts.Chart({ 
                          chart: { 
                              renderTo: 'containerliuliang',//放置图表的容器 
                              plotBackgroundColor: null, 
                              plotBorderWidth: null, 
                              defaultSeriesType: 'column'  //图表类型line, spline, area, areaspline, column, bar, pie , scatter 
                          }, 
                          title: { 
                              text: '近年会费缴纳情况', 
                              style: { font: 'normal 13px 宋体' } 
                          }, 
                          xAxis: {//X轴数据 
                              categories: jsonXData, 
                              lineWidth: 2, 
                              labels: { 
                                  rotation: -45, //字体倾斜 
                                  align: 'right', 
                                  style: { font: 'normal 13px 宋体' } 
                              } 
                          }, 
                          yAxis: {//Y轴显示文字 
                              lineWidth: 2, 
                              title: { 
                                  text: '金额/万元' 
                              } 
                          }, 
                          tooltip: { 
                              formatter: function () { 
                                  return '<b>' + this.x + '</b><br/>' + 
                              this.series.name + ': ' + this.y+'万元'; 
                              } 
                          }, 
                          plotOptions: { 
                              column: { 
                                  dataLabels: { 
                                      enabled: true 
                                  }, 
                                  enableMouseTracking: true//是否显示title 
                              } 
                          }, 
                          series: [{ 
jquery实现ajax                              name: '应缴', 
                              data: jsonyD1 
                          }, { 
                              name: '实缴', 
                              data: jsonyD2 
                          }] 
                      }); 
                      //$("tspan:last").hide(); //把广告删除掉 
                  } //if 
              } 
          }); 
      }); 
  </script> 
 
<div > 
    <fieldset> 
    <div> 
        <div > 
        <div id="containerliuliang" ></div> 
        </div> 
    </div> 
    </fieldset> 
</div> 
后端获取数据代码就不展示了，相信大家都能写出来，有不懂得地方，给我留言！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。