`
吃姑凉不吐皮
  • 浏览: 1589 次
文章分类
社区版块
存档分类
最新评论
  • 刘志丽: 你好,请问,饼图上面的百分比是通过什么显示的?我现在所做的,只 ...
    jqplot画饼图

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> '
                  }
            });
               
      }

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics