图形化工具jqplot使用梳理3--柱状图及水平线

引用柱状图渲染器
<script type="text/javascript" src="${ctx}/resources/jqplot/plugins/jqplot.barRenderer.min.js"></script>

引用高亮或鼠标手插件
<script src="${ctx}/resources/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script src="${ctx}/resources/jqplot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/jqplot/plugins/jqplot.pointLabels.min.js"></script>
 

源代码   jqplot默认的颜色
jquery.jqplot.min.js 可以手动配置 defaultColors:["#00cc00","#ff0000"," 用于展示要填充的颜色

var plot1 = $.jqplot('chartBar', [s2,s1], {
           //seriesColors: ["#00cc00","#ff0000"],
           stackSeries: true,//******************是否去栈颜色，配置后seriesColors无效，取默认配置的颜色数组defaultColors
        title: '${title}', //标题 
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
                fillToZero: true    //*******************是否进行0水平线的定位
               
                //,barPadding: -5 //设置同一分类两个柱状条之间的距离(px)
                //,barMargin: 20 //设置不同分类两个柱状条之间的距离(px)(同一个横坐标表点上)
                //barDirection: 'vertical', //设置柱状图显示的方向：垂直显示和水平显示，默认垂直显示 vertical or horizontal.
                //barWidth: null, //设置柱状图中每个柱状条的宽度
                ,shadowWidth: 0//设置阴影区域的宽度
                ,shadowDepth: 0 //设置影音区域重叠阴影的数量
                ,shadowAlpha: 0.1 //设置阴影区域的透明度
            },
            pointLabels: { //
                show: false, location: 'sw',ypadding: -1
            } //, edgeTolerance: -25
        },
        series:[
            {label:''
                   //,xaxis:'x2axis'    
           },
           {label:''
               //,color:'#ff0000'
               //,xaxis:'x2axis'    
          }
        ],
        legend: {
            show: true
            //,placement: 'inside'
            ,location: 'nw' //分类名称框出现位置, nw, n, ne, e, se, s, sw, w.
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,//渲染方式
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickInterval:3,
                ticks: ${ticks},//坐标轴
                tickOptions: {
                    angle: -30,
                    fontSize: '10pt',
                    show: false, // 是否显示刻度线，与刻度线同方向的网格线，以及坐标轴上的刻度值
                    showLabel: false //是否显示
                    //,formatter: weekTickFormatter
                  }
            },
            yaxis: {
                pad: 1.05,
                tickOptions: {
                    mark: 'outside',
                    showMark: true, 
                    formatString: '%d' // 设置坐标轴上刻度值显示格
                }
                //,max:${maxValue}
                //,lable:"家数"
            }
        },
        cursor: {//鼠标手插件
            show: true,
            //style:'crosshair',
            //followMouse: true,
            tooltipLocation:'ne',
          showVerticalLine: true,//是否显示标尺线
          zoom:true,//是否固定光标位置
          showTooltipGridPosition: false,//是否在信息提示栏中显示光标位置（取其据图标左和上边缘线像素距离）             
          showTooltipUnitPosition: true,// 是否显示提示光标所在位置（取其在横纵轴上数据值）的信息栏
         
          tooltipAxes: 'y', // 提示信息框显示数据点那个坐标轴上的值，目前有横/纵/横纵三种方式。//值分别为 x, y or xy.
            //tooltipSeparator: ',' ,// 提示信息栏不同值之间的间隔符号
            useAxesFormatters: false ,// 提示信息框中数据显示的格式是否和该数据在坐标轴上显示格式一致<tr><td>日期:</td><td>%s</td></tr>
            tooltipAxesGroups: [['yaxis','xaxis']],
            tooltipFormatString: '<table class="jqplot-highlighter"><tr><td>个数:</td><td><span style="display:none;"></span>%d,%d</td></tr></table>'
            // 用于设置提示信息框中数据显示的格式，前提条件是useAxesFormatters为false. 此时信息提示框中数据格式不再与坐标轴一致，而是以此为准
            //同时，该属性还支持html格式字符串 eg:'<b><i><span style="color:red;" mce_style="color:red;">hello</span></i></b> %.2f'
       }
    });  
   
   
效果图：