jqplot画柱状图

function drawChart( msg){
            document.getElementById( "data").style.display = "inline" ;
            $( "#chart1").empty();
             var line1 = new Array();//查询的实际数据
             var line2 = new Array();//同一时间段上个星期的数据
             var data1 = new Array();//line1中的数据 用来查找最大值
             var data2 = new Array();//line2中的数据 用来查找最大值
           
            $.each(msg.businessDataList, function (key, val) {
                   var count=msg.businessDataList[key].count;
                   var subTypeName=msg.businessDataList[key].subTypeName;
                  line1.push([subTypeName,count]);
                  data1.push(count);
            });

            $.each(msg.businessDataListOld, function (key, val) {
                   var count=msg.businessDataListOld[key].count;
                   var subTypeName=msg.businessDataListOld[key].subTypeName;
                  line2.push([subTypeName,count]);
                  data2.push(count);
            });
           
             var tricks1=getTickIntervalTmp(data1);
             var tricks2=getTickIntervalTmp(data2);
             if(tricks1>tricks2)
                  tricks=tricks1;
             else tricks=tricks2;
             var data=new Array();
             var colors=new Array();
             var label=new Array();
             if(line1.length!=0){
                  line1.push([ "",0]);
                  data.push(line1);
                  colors.push( "#4bb2c5");
                  label.push({label: '当前查询'});
            }
             if(line2.length!=0){
                  line2.push([ "",0]);
                  data.push(line2);
                  colors.push( "#EAA228");
                  label.push({label: '上周同期'});
            }
            plot1 = $.jqplot( 'chart1', data, {
                  legend: {show: true, location: 'ne' }, //提示工具栏--show:是否显示,location: 显示位置 (e:东,w:西,s:南,n:北,nw:西北,ne:东北,sw:西南,se:东南)
                  series: label, //提示工具栏
                  seriesColors:colors,
                  seriesDefaults:{
                        renderer:$.jqplot.BarRenderer,
                        pointLabels: {
                              show: true
                              },
                        rendererOptions: {
                              barWidth: 20 // 设置柱状图中每个柱状条的宽度
                        }
                  },
                  axes: {
                        xaxis: {
                              renderer: $.jqplot.CategoryAxisRenderer,
                        },
                        yaxis: { //准确控制y轴最大值及最小值,间隔个数 
                              tickInterval: tricks,        //网格线间隔大小
                              min: 0,
                              numberTicks:6, //网格线条数
                        }
                  },
                   //高亮
                  highlighter: {
                        show: true,
                        tooltipAxes: 'y',
                        tooltipLocation : 'ne',
                        useAxesFormatters: false,
                  tooltipFormatString: '<font size="3" color="red">数量:%.0f次</font> '
                  }
            });
               
      }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值