jqplot配置详解
1 options = 2 { 3 seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12", 4 "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默认显示的分类颜色， 5 //如果分类的数量超过这里的颜色数量，则从该队列中第一个位置开始重新取值赋给相应的分类 6 stackSeries: false, // 如果置为true并且有多个分类（如果是折线图，就必须多于一条折线）， 7 // 那么每个分类（折线）在纵轴上的值为其前所有分类纵轴值总和与其纵 8 //轴值相加值（eg,当前分类纵轴值为Y3 9 //，其前有Y2,Y1，那么他显示在Y轴上值为Y2+Y3+Y1,目前该属性支持线图和柱状图 10 title: '', //设置当前图的标题 11 title: { 12 text: '', // 设置当前图的标题 13 show: true,//设置当前标题是否显示 14 }, 15 axisDefaults: { 16 show: false, // wether or not to renderer the axis. Determined automatically. 17 min: null, // 横（纵）坐标显示的最小值 18 max: null, // 横（纵）坐标显示的最大值 19 pad: 1.2, // 一个相乘因子， 20 //（数据在横（纵）轴上最大值-数据在横（纵）轴上最小值）*pad值=该轴显示的横（纵）坐标区间长度 21 // 该轴显示的横（纵）坐标区间长度=横（纵）坐标显示的最大值-横（纵）坐标显示的最小值 22 //如果设置了max和min的值的话，那么会优先考虑min和max设置的值 23 ticks: [], //设置横（纵）坐标的刻度上的值，可为该ticks数组中的值， 24 // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...] 25 numberTicks: undefined, //一个相除因子，用于设置横（纵）坐标刻度间隔 26 //横（纵）坐标刻度间隔值=横（纵）坐标区间长度/(numberTicks-1) 27 tickInterval:'', //横（纵）坐标刻度间隔值，可为日期字符串 28 renderer: $.jqplot.LinearAxisRenderer, 29 // 设置横（纵）轴上数据加载的渲染器,有dateAxisRenderer（参见本文最后相关介绍） 。 30 rendererOptions: {}, // 设置renderer的Option配置对象，线状图不需要设置 31 //不同图表的Option配置对象请参见下面《jqPlot各个不同插件的Option对象设置》 32 //中各个图表的配置Option对象 33 tickOptions: { 34 mark: 'outside', // 设置横（纵）坐标刻度在坐标轴上显示方式，分为坐标轴内，外，穿过坐标轴显示 35 // 值也分为：'outside', 'inside' 和 'cross', 36 showMark: true, //设置是否显示刻度 37 showGridLine: true, // 是否在图表区域显示刻度值方向的网格线 38 markSize: 4, // 每个刻度线顶点距刻度线在坐标轴上点距离（像素为单位） 39 //如果mark值为 'cross', 那么每个刻度线都有上顶点和下顶点，刻度线与坐标轴 40 //在刻度线中间交叉，那么这时这个距离×2, 41 show: true, // 是否显示刻度线，与刻度线同方向的网格线，以及坐标轴上的刻度值 42 showLabel: true, // 是否显示刻度线以及坐标轴上的刻度值 43 formatString: '', // 梃置坐标轴上刻度值显示格式，eg:'%b %#d, %Y'表示格式"月 日，年"，"AUG 30,2008" 44 fontSize:'10px', //刻度值的字体大小 45 fontFamily:'Tahoma', //刻度值上字体 46 angle:40, //刻度值与坐标轴夹角，角度为坐标轴正向顺时针方向 47 fontWeight:'normal', //字体的粗细 48 fontStretch:1//刻度值在所在方向（坐标轴外）上的伸展(拉伸)度 49 } 50 showTicks: true, /// 是否显示刻度线以及坐标轴上的刻度值 51 showTickMarks: true, //设置是否显示刻度 52 useSeriesColor: true //如果有多个纵（横）坐标轴，通过该属性设置这些坐标轴是否以不同颜色显示 53 }, 54 55 axes: { 56 xaxis: { 57 // 设置同 axisDefaults 58 }, 59 yaxis: { 60 // 设置同 axisDefaults 61 }, 62 x2axis: { 63 // 设置同 axisDefaults 64 }, 65 y2axis: { 66 // 设置同 axisDefaults 67 } 68 }, 69 70 seriesDefaults: {//如果有多个分类，这可通过该配置属性设置各个分类的共性属性 71 show: true, // 设置是否渲染整个图表区域（即显示图表中内容） 72 xaxis: 'xaxis', // either 'xaxis' or 'x2axis'. 73 yaxis: 'yaxis', // either 'yaxis' or 'y2axis'. 74 label: '', // 用于显示在分类名称框中的分类名称 75 color: '', // 分类在图标中表示（折现，柱状图等）的颜色 76 lineWidth: 2.5, // 分类图（特别是折线图）哪宽度 77 shadow: true, // 各图在图表中是否显示阴影区域 78 shadowAngle: 45, // 参考grid中相同参数 79 shadowOffset: 1.25, // 参考grid中相同参数 80 shadowDepth: 3, // 参考grid中相同参数 81 shadowAlpha: 0.1, // 参考grid中相同参数 82 showLine: true, //是否显示图表中的折线（折线图中的折线） 83 showMarker: true, // 是否强调显示图中的数据节点 84 fill: false, // 是否填充图表中折线下面的区域（填充颜色同折线颜色）以及legend 85 //设置的分类名称框中分类的颜色，此处注意的是如果fill为true， 86 //那么showLine必须为true，否则不会显示效果 87 fillAndStroke: false, //在fill为true的状态下，在填充区域最上面显示一条线（如果是折线图则显示该折线） 88 fillColor: undefined, // 设置填充区域的颜色 89 fillAlpha: undefined, // 梃置填充区域的透明度 90 renderer: $.jqplot.PieRenderer, // 利用渲染器（这里是利用饼图PieRenderer）渲染现有图表 91 //，从而转换成所需图表 92 rendererOptions: {}, // 传给上个属性所设置渲染器的option对象，线状图的渲染器没有option对象， 93 //不同图表的Option配置对象请参见下面《jqPlot各个不同插件的Option对象设置》 94 //中各个图表的配置Option对象 95 markerRenderer: $.jqplot.MarkerRenderer, // renderer to use to draw the data 96 // point markers. 97 markerOptions: { 98 show: true, // 是否在图中显示数据点 99 style: 'filledCircle', // 各个数据点在图中显示的方式，默认是"filledCircle"(实心圆点), 100 //其他几种方式circle，diamond, square, filledCircle， 101 // filledDiamond or filledSquare. 102 lineWidth: 2, // 数据点各个的边的宽度（如果设置过大，各个边会重复，会显示的类似于实心点） 103 size: 9, // 数据点的大小 104 color: '#666666' // 数据点的颜色 105 shadow: true, // 是否为数据点显示阴影区（增加立体效果） 106 shadowAngle: 45, // 阴影区角度，x轴顺时针方向 107 shadowOffset: 1, // 参考grid中相同参数 108 shadowDepth: 3, //参考grid中相同参数 109 shadowAlpha: 0.07 // 参考grid中相同参数 110 } 111 isDragable: true,//是否允许拖动（如果dragable包已引入）,默认可拖动 112 }, 113 series:[//如果有多个分类需要显示，这在此处设置各个分类的相关配置属性 114 //eg.设置各个分类在分类名称框中的分类名称 115 //[label: 'Traps Division'},{label: 'Decoy Division'},{label: 'Harmony Division'}] 116 //配置参数设置同seriesDefaults 117 ], 118 119 legend: { 120 show: false,//设置是否出现分类名称框（即所有分类的名称出现在图的某个位置） 121 location: 'ne', // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w. 122 xoffset: 12, // 分类名称框距图表区域上边框的距离（单位px） 123 yoffset: 12, // 分类名称框距图表区域左边框的距离(单位px) 124 background:'' //分类名称框距图表区域背景色 125 textColor:'' //分类名称框距图表区域内字体颜色 126 ..其他关于样式设计参考官方文档 127 }, 128 129 grid: { 130 drawGridLines: true, // wether to draw lines across the grid or not. 131 gridLineColor: '#cccccc' // 设置整个图标区域网格背景线的颜色 132 background: '#fffdf6', // 设置整个图表区域的背景色 133 borderColor: '#999999', // 设置图表的(最外侧)边框的颜色 134 borderWidth: 2.0, //设置图表的（最外侧）边框宽度 135 shadow: true, // 为整个图标（最外侧）边框设置阴影，以突出其立体效果 136 shadowAngle: 45, // 设置阴影区域的角度，从x轴顺时针方向旋转 137 shadowOffset: 1.5, // 设置阴影区域偏移出图片边框的距离 138 shadowWidth: 3, // 设置阴影区域的宽度 139 shadowDepth: 3, // 设置影音区域重叠阴影的数量 140 shadowAlpha: 0.07 // 设置阴影区域的透明度 141 renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid. 142 rendererOptions: {} // options to pass to the renderer. Note, the default 143 // CanvasGridRenderer takes no additional options. 144 }, 145 146 /************************jqPlot各个不同插件的Option对象设置******************************/ 147 148 // BarRenderer（设置柱状图的Option对象） 149 //该Option对象适用与柱状图的series和seriesDefault属性的相关配置对象设置 150 seriesDefaults: { 151 rendererOptions: { 152 barPadding: 8, //设置同一分类两个柱状条之间的距离（px） 153 barMargin: 10, //设置不同分类的两个柱状条之间的距离（px）（同一个横坐标表点上） 154 barDirection: 'vertical', //设置柱状图显示的方向：垂直显示和水平显示 155 //，默认垂直显示 vertical or horizontal. 156 barWidth: null, // 设置柱状图中每个柱状条的宽度 157 shadowOffset: 2, // 同grid相同属性设置 158 shadowDepth: 5, // 同grid相同属性设置 159 shadowAlpha: 0.8, // 同grid相同属性设置 160 } 161 }, 162 163 // Cursor(光标) 164 // 鼠标移动到图中时，鼠标在图中显示形式，常与和高亮功能同时使用 165 //此外，通过设置该属性的zoom相关属性来对图中某个区域钻取（就选定区域放大） 166 //该配置对象直接在option下配置 167 168 cursor: { 169 style: 'crosshair', //当鼠标移动到图片上时，鼠标的显示样式，该属性值为css类 170 show: true, //是否显示光标 171 showTooltip: true, // 是否显示提示信息栏 172 followMouse: false, //光标的提示信息栏是否随光标（鼠标）一起移动 173 tooltipLocation: 'se', // 光标提示信息栏的位置设置。如果followMouse=true,那么该位置为 174 //提示信息栏相对于光标的位置。否则，为光标提示信息栏在图标中的位置 175 // 该属性可选值： n, ne, e, se, etc. 176 tooltipOffset: 6, //提示信息栏距鼠标(followMouse=true)或坐标轴（followMouse=false）的位置 177 showTooltipGridPosition: false,//是否在信息提示栏中显示光标位置（取其据图标左和上边缘线像素距离） 178 showTooltipUnitPosition: true,// 是否显示提示光标所在位置（取其在横纵轴上数据值）的信息栏 179 //注：注意此处与showTooltipGridPosition值区别，前者显示坐标值，该处显示的是数据值 180 tooltipFormatString: '%.4P', // 同Highlighter的tooltipFormatString 181 useAxesFormatters: true, // 同Highlighter的tooltipFormatString 182 tooltipAxesGroups: [], // show only specified axes groups in tooltip. Would specify like: 183 // [['xaxis', 'yaxis'], ['xaxis', 'y2axis']]. By default, all axes 184 // combinations with for the series in the plot are shown. 185 186 }, 187 188 // Dragable（拖动） 189 //该配置对象通过seriesDefaults和series配置对象进行配置 190 seriesDefaults: { 191 dragable: { 192 color: undefined, // 当拖动数据点是，拖动线与拖动数据点颜色 193 constrainTo: 'none', //设置拖动的的范围: 'x'（只能在横向上拖动）, 194 // 'y'（只能在纵向上拖动）, or 'none'（无限制）. 195 }, 196 }, 197 // Highlighter（高亮） 198 //设置高亮动作option属性对象 199 //鼠标移动到某个数据点上时，该数据点增大并显示提示信息框 200 //该配置对象直接在option下配置 201 highlighter: { 202 lineWidthAdjust: 2.5, //当鼠标移动到放大的数据点上时，设置增大的数据点的宽度 203 // 目前仅适用于非实心数据点 204 sizeAdjust: 5, // 当鼠标移动到数据点上时，数据点扩大的增量增量 205 showTooltip: true, // 是否显示提示信息栏 206 tooltipLocation: 'nw', // 提示信息显示位置（英文方向的首写字母）: n, ne, e, se, s, sw, w, nw. 207 fadeTooltip: true, // 设置提示信息栏出现和消失的方式（是否淡入淡出） 208 tooltipFadeSpeed: "fast"//设置提示信息栏淡入淡出的速度： slow, def, fast, 或者是一个毫秒数的值. 209 tooltipOffset: 2, // 提示信息栏据被高亮显示的数据点的偏移位置，以像素计。 210 tooltipAxes: 'both', // 提示信息框显示数据点那个坐标轴上的值，目前有横/纵/横纵三种方式。 211 //值分别为 x, y or xy. 212 tooltipSeparator: ', ' // 提示信息栏不同值之间的间隔符号 213 useAxesFormatters: true // 提示信息框中数据显示的格式是否和该数据在坐标轴上显示格式一致 214 tooltipFormatString: '%.5P' // 用于设置提示信息框中数据显示的格式，前提条件是useAxesFormatters 215 // 为false. 此时信息提示框中数据格式不再与坐标轴一致，而是以此为准 216 //同时，该属性还支持html格式字符串 217 //eg:'<b><i><span style="color:red;" mce_style="color:red;">hello</span></i></b> %.2f' 218 }, 219 220 // LogAxisRenderer(指数渲染器) 221 // 该渲染器只有两个属性， 指数渲染器通过axesDefaults和axes配置对象进行配置 222 223 axesDefaults: { 224 base: 10, // 指数的底数 225 tickDistribution: 'even', // 坐标轴显示方式：'even' or 'power'. 'even' 产生的是均匀分布于坐标 226 //轴上的坐标刻度值 。而'power' 则是根据不断增大的增数来确定坐标轴上的刻度 227 }, 228 229 // PieRenderer(设置饼状图的OPtion对象) 230 // 饼状图通过seriesDefaults和series配置对象进行配置 231 232 seriesDefaults: { 233 rendererOptions: { 234 diameter: undefined, // 设置饼的直径 235 padding: 20, // 饼距离其分类名称框或者图表边框的距离，变相该表饼的直径 236 sliceMargin: 20, // 饼的每个部分之间的距离 237 fill:true, // 设置饼的每部分被填充的状态 238 shadow:true, //为饼的每个部分的边框设置阴影，以突出其立体效果 239 shadowOffset: 2, //设置阴影区域偏移出饼的每部分边框的距离 240 shadowDepth: 5, // 设置阴影区域的深度 241 shadowAlpha: 0.07 // 设置阴影区域的透明度 242 } 243 }, 244 245 //pointLabels(数据点标签) 246 //用于在数据点所在位置显示相关信息（非提示框性质） 247 seriesDefaults: { 248 pointLabels: { 249 location:'s',//数据标签显示在数据点附近的方位 250 ypadding:2 //数据标签距数据点在纵轴方向上的距离 251 } 252 } 253 254 // Trendline（趋势线） 255 // 饼状图通过seriesDefaults和series配置对象进行配置 256 257 seriesDefaults: { 258 trendline: { 259 show: true, // 是否显示趋势线 260 color: '#666666', // 趋势线颜色 261 label: '', // 趋势线名称 262 type: 'linear', //趋势线类型'linear'（直线）, 'exponential'（幂值数线） or 'exp' 263 shadow: true, // 同grid相同属性设置 264 lineWidth: 1.5, // 趋势线宽度 265 shadowAngle: 45, // 同grid相同属性设置 266 shadowOffset: 1.5, // 同grid相同属性设置 267 shadowDepth: 3, // 同grid相同属性设置 268 shadowAlpha: 0.07 // 同grid相同属性设置 269 } 270 } 271 }
注意：导入js文件时候，一定要把jquery.jqplot.js主文件先导入，再导入其他的附加的js文件。（就是把主js文件放其他的js位置上面）。否则会报错。