`

jqPlot的Option配置对象详解

 
阅读更多

  如果看过本文姊妹篇《jqPlot——基于jquery的图表绘制工具》的朋友,应该知道jqPlot大致的操作方法;如果还是不太清楚的话,可以参考jqPlot官方网站的使用方法介绍。这里主要介绍jqPlot中核心部分——Option配置对象。同时,也会对jqplot的各个渲染器做个简单介绍。

     这里主要是参考jqPlot官方网站关于Option的介绍并结自己简单实践和理解来对Option的相关属性进行解释,如有不合适或错误的地方请指正。


options = 
{
    seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12", 
        "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"],  // 默认显示的分类颜色,
        //如果分类的数量超过这里的颜色数量,则从该队列中第一个位置开始重新取值赋给相应的分类

    stackSeries: false, // 如果置为true并且有多个分类(如果是折线图,就必须多于一条折线),
                        // 那么每个分类(折线)在纵轴上的值为其前所有分类纵轴值总和与其纵
                        //轴值相加值(eg,当前分类纵轴值为Y3
                        //,其前有Y2,Y1,那么他显示在Y轴上值为Y2+Y3+Y1,目前该属性支持线图和柱状图

    title: '',      //设置当前图的标题

    title: {
        text: '',   // 设置当前图的标题
        show: true,//设置当前标题是否显示
    },

    axisDefaults: {
        show: false,    // wether or not to renderer the axis.  Determined automatically.
        min: null,      // 横(纵)坐标显示的最小值
        max: null,      // 横(纵)坐标显示的最大值
        pad: 1.2,       // 一个相乘因子,
                //(数据在横(纵)轴上最大值-数据在横(纵)轴上最小值)*pad值=该轴显示的横(纵)坐标区间长度
                // 该轴显示的横(纵)坐标区间长度=横(纵)坐标显示的最大值-横(纵)坐标显示的最小值
                //如果设置了max和min的值的话,那么会优先考虑min和max设置的值
        ticks: [],      //设置横(纵)坐标的刻度上的值,可为该ticks数组中的值,
                      // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]                         
        numberTicks: undefined,  //一个相除因子,用于设置横(纵)坐标刻度间隔
                                 //横(纵)坐标刻度间隔值=横(纵)坐标区间长度/(numberTicks-1)
        tickInterval:'',         //横(纵)坐标刻度间隔值,可为日期字符串
        renderer: $.jqplot.LinearAxisRenderer,  // 设置横(纵)轴上数据加载的渲染器,有dateAxisRenderer(参见本文最后相关介绍) 。
        rendererOptions: {},    // 设置renderer的Option配置对象,线状图不需要设置
                    //不同图表的Option配置对象请参见下面《jqPlot各个不同插件的Option对象设置》
                             //中各个图表的配置Option对象
        tickOptions: {
            mark: 'outside',    // 设置横(纵)坐标刻度在坐标轴上显示方式,分为坐标轴内,外,穿过坐标轴显示
                                // 值也分为:'outside', 'inside' 和 'cross',
            showMark: true,     //设置是否显示刻度
            showGridLine: true, // 是否在图表区域显示刻度值方向的网格线
            markSize: 4,        // 每个刻度线顶点距刻度线在坐标轴上点距离(像素为单位)
                                //如果mark值为 'cross', 那么每个刻度线都有上顶点和下顶点,刻度线与坐标轴
                                //在刻度线中间交叉,那么这时这个距离×2,
            show: true,         // 是否显示刻度线,与刻度线同方向的网格线,以及坐标轴上的刻度值
            showLabel: true,    // 是否显示刻度线以及坐标轴上的刻度值
            formatString: '',   // 梃置坐标轴上刻度值显示格式,eg:'%b %#d, %Y'表示格式"月 日,年","AUG 30,2008"
            fontSize:'10px',    //刻度值的字体大小
           fontFamily:'Tahoma', //刻度值上字体
           angle:40,           //刻度值与坐标轴夹角,角度为坐标轴正向顺时针方向
           fontWeight:'normal', //字体的粗细
           fontStretch:1//刻度值在所在方向(坐标轴外)上的伸展(拉伸)度
        }
        showTicks: true,        /// 是否显示刻度线以及坐标轴上的刻度值
        showTickMarks: true,    //设置是否显示刻度
        useSeriesColor: true     //如果有多个纵(横)坐标轴,通过该属性设置这些坐标轴是否以不同颜色显示
    },
    
    axes: {
        xaxis: {
            // 设置同 axisDefaults
        },
        yaxis: {
            // 设置同 axisDefaults
        },
        x2axis: {
           // 设置同 axisDefaults
        },
        y2axis: {
            // 设置同 axisDefaults
        }
    },
    
    seriesDefaults: {//如果有多个分类,这可通过该配置属性设置各个分类的共性属性
        show: true,     // 设置是否渲染整个图表区域(即显示图表中内容)
        xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
        yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
        label: '',      // 用于显示在分类名称框中的分类名称
        color: '',      // 分类在图标中表示(折现,柱状图等)的颜色
        lineWidth: 2.5, // 分类图(特别是折线图)哪宽度
        shadow: true,   // 各图在图表中是否显示阴影区域
        shadowAngle: 45,    // 参考grid中相同参数
        shadowOffset: 1.25, // 参考grid中相同参数
        shadowDepth: 3,     // 参考grid中相同参数
        shadowAlpha: 0.1,   // 参考grid中相同参数
        showLine: true,     //是否显示图表中的折线(折线图中的折线)
        showMarker: true,   // 是否强调显示图中的数据节点
        fill: false,        // 是否填充图表中折线下面的区域(填充颜色同折线颜色)以及legend
                            //设置的分类名称框中分类的颜色,此处注意的是如果fill为true,
                           //那么showLine必须为true,否则不会显示效果
        fillAndStroke: false,       //在fill为true的状态下,在填充区域最上面显示一条线(如果是折线图则显示该折线)
        fillColor: undefined,       // 设置填充区域的颜色
        fillAlpha: undefined,       // 梃置填充区域的透明度
        renderer: $.jqplot.PieRenderer,  // 利用渲染器(这里是利用饼图PieRenderer)渲染现有图表
                                       //,从而转换成所需图表
        rendererOptions: {}, // 传给上个属性所设置渲染器的option对象,线状图的渲染器没有option对象,
                             //不同图表的Option配置对象请参见下面《jqPlot各个不同插件的Option对象设置》
                             //中各个图表的配置Option对象
        markerRenderer: $.jqplot.MarkerRenderer,    // renderer to use to draw the data 
                                                    // point markers.
        markerOptions: { 
            show: true,             // 是否在图中显示数据点
            style: 'filledCircle',  // 各个数据点在图中显示的方式,默认是"filledCircle"(实心圆点),
                                    //其他几种方式circle,diamond, square, filledCircle,
                                    // filledDiamond or filledSquare.
            lineWidth: 2,       // 数据点各个的边的宽度(如果设置过大,各个边会重复,会显示的类似于实心点)
            size: 9,            // 数据点的大小
            color: '#666666'    // 数据点的颜色
            shadow: true,       // 是否为数据点显示阴影区(增加立体效果)
            shadowAngle: 45,    // 阴影区角度,x轴顺时针方向
            shadowOffset: 1,    // 参考grid中相同参数
            shadowDepth: 3,     //参考grid中相同参数
            shadowAlpha: 0.07   // 参考grid中相同参数
        }
        isDragable: true,//是否允许拖动(如果dragable包已引入),默认可拖动
    },

    series:[//如果有多个分类需要显示,这在此处设置各个分类的相关配置属性
       //eg.设置各个分类在分类名称框中的分类名称
       //[label: 'Traps Division'},{label: 'Decoy Division'},{label: 'Harmony Division'}]
        //配置参数设置同seriesDefaults
    ],
    
    legend: {
        show: false,//设置是否出现分类名称框(即所有分类的名称出现在图的某个位置)
        location: 'ne',     // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w.
        xoffset: 12,        // 分类名称框距图表区域上边框的距离(单位px)
        yoffset: 12,        // 分类名称框距图表区域左边框的距离(单位px)
        background:''        //分类名称框距图表区域背景色
        textColor:''          //分类名称框距图表区域内字体颜色
        ..其他关于样式设计参考官方文档

    },
    
    grid: {
        drawGridLines: true,        // wether to draw lines across the grid or not.
        gridLineColor: '#cccccc'    // 设置整个图标区域网格背景线的颜色
        background: '#fffdf6',      // 设置整个图表区域的背景色
        borderColor: '#999999',     // 设置图表的(最外侧)边框的颜色
        borderWidth: 2.0,           //设置图表的(最外侧)边框宽度
        shadow: true,               // 为整个图标(最外侧)边框设置阴影,以突出其立体效果
        shadowAngle: 45,            // 设置阴影区域的角度,从x轴顺时针方向旋转
        shadowOffset: 1.5,          // 设置阴影区域偏移出图片边框的距离
        shadowWidth: 3,             // 设置阴影区域的宽度
        shadowDepth: 3,             // 设置影音区域重叠阴影的数量
        shadowAlpha: 0.07           // 设置阴影区域的透明度
        renderer: $.jqplot.CanvasGridRenderer,  // renderer to use to draw the grid.
        rendererOptions: {}         // options to pass to the renderer.  Note, the default
                                    // CanvasGridRenderer takes no additional options.
    },                              
    
    /************************jqPlot各个不同插件的Option对象设置******************************/
    
    // BarRenderer(设置柱状图的Option对象)
    //该Option对象适用与柱状图的series和seriesDefault属性的相关配置对象设置

    seriesDefaults: {
        rendererOptions: {
            barPadding: 8,      //设置同一分类两个柱状条之间的距离(px)
            barMargin: 10,      //设置不同分类的两个柱状条之间的距离(px)(同一个横坐标表点上)
            barDirection: 'vertical', //设置柱状图显示的方向:垂直显示和水平显示
                                 //,默认垂直显示 vertical or horizontal.
            barWidth: null,     // 设置柱状图中每个柱状条的宽度
            shadowOffset: 2,    // 同grid相同属性设置
            shadowDepth: 5,     // 同grid相同属性设置
            shadowAlpha: 0.8,   // 同grid相同属性设置
        }
    },
    
    // Cursor(光标)
    // 鼠标移动到图中时,鼠标在图中显示形式,常与和高亮功能同时使用
    //此外,通过设置该属性的zoom相关属性来对图中某个区域钻取(就选定区域放大)
    //该配置对象直接在option下配置
    
    cursor: {
        style: 'crosshair',     //当鼠标移动到图片上时,鼠标的显示样式,该属性值为css类
        show: true,              //是否显示光标
        showTooltip: true,      // 是否显示提示信息栏
        followMouse: false,     //光标的提示信息栏是否随光标(鼠标)一起移动
        tooltipLocation: 'se',  // 光标提示信息栏的位置设置。如果followMouse=true,那么该位置为
                                //提示信息栏相对于光标的位置。否则,为光标提示信息栏在图标中的位置
                                // 该属性可选值: n, ne, e, se, etc.
        tooltipOffset: 6,     //提示信息栏距鼠标(followMouse=true)或坐标轴(followMouse=false)的位置
        showTooltipGridPosition: false,//是否在信息提示栏中显示光标位置(取其据图标左和上边缘线像素距离)   
        showTooltipUnitPosition: true,// 是否显示提示光标所在位置(取其在横纵轴上数据值)的信息栏
                    //注:注意此处与showTooltipGridPosition值区别,前者显示坐标值,该处显示的是数据值
        tooltipFormatString: '%.4P',    // 同Highlighter的tooltipFormatString
        useAxesFormatters: true,        // 同Highlighter的tooltipFormatString
        tooltipAxesGroups: [],  // show only specified axes groups in tooltip.  Would specify like:
                                // [['xaxis', 'yaxis'], ['xaxis', 'y2axis']].  By default, all axes
                                // combinations with for the series in the plot are shown.
        
    },
    
    // Dragable(拖动)
    //该配置对象通过seriesDefaults和series配置对象进行配置
    seriesDefaults: {
     dragable: {
         color: undefined,       // 当拖动数据点是,拖动线与拖动数据点颜色
         constrainTo: 'none',    //设置拖动的的范围: 'x'(只能在横向上拖动),
                               // 'y'(只能在纵向上拖动), or 'none'(无限制).
     },
    },
    // Highlighter(高亮)
    //设置高亮动作option属性对象
     //鼠标移动到某个数据点上时,该数据点增大并显示提示信息框
    //该配置对象直接在option下配置    
    highlighter: {
        lineWidthAdjust: 2.5,   //当鼠标移动到放大的数据点上时,设置增大的数据点的宽度                                 
                                // 目前仅适用于非实心数据点      
        sizeAdjust: 5,          // 当鼠标移动到数据点上时,数据点扩大的增量增量
        showTooltip: true,      // 是否显示提示信息栏
        tooltipLocation: 'nw',  // 提示信息显示位置(英文方向的首写字母): n, ne, e, se, s, sw, w, nw.
        fadeTooltip: true,      // 设置提示信息栏出现和消失的方式(是否淡入淡出)
        tooltipFadeSpeed: "fast"//设置提示信息栏淡入淡出的速度: slow, def, fast, 或者是一个毫秒数的值.
        tooltipOffset: 2,       // 提示信息栏据被高亮显示的数据点的偏移位置,以像素计。
        tooltipAxes: 'both',    // 提示信息框显示数据点那个坐标轴上的值,目前有横/纵/横纵三种方式。
                    //值分别为 x, y or xy.
        tooltipSeparator: ', '  // 提示信息栏不同值之间的间隔符号
        useAxesFormatters: true // 提示信息框中数据显示的格式是否和该数据在坐标轴上显示格式一致
        tooltipFormatString: '%.5P' // 用于设置提示信息框中数据显示的格式,前提条件是useAxesFormatters
                                    // 为false. 此时信息提示框中数据格式不再与坐标轴一致,而是以此为准
                                    //同时,该属性还支持html格式字符串
                                    //eg:'<b><i><span style="color:red;">hello</span></i></b> %.2f'
    },
    
    // LogAxisRenderer(指数渲染器)
    // 该渲染器只有两个属性, 指数渲染器通过axesDefaults和axes配置对象进行配置
    
    axesDefaults: {
        base: 10,                   // 指数的底数
        tickDistribution: 'even',   // 坐标轴显示方式:'even' or 'power'.  'even' 产生的是均匀分布于坐标
                                  //轴上的坐标刻度值 。而'power' 则是根据不断增大的增数来确定坐标轴上的刻度
    },
    
    // PieRenderer(设置饼状图的OPtion对象)
    // 饼状图通过seriesDefaults和series配置对象进行配置
    
    seriesDefaults: {
        rendererOptions: {
             diameter: undefined, // 设置饼的直径
            padding: 20,        // 饼距离其分类名称框或者图表边框的距离,变相该表饼的直径
            sliceMargin: 20,     // 饼的每个部分之间的距离
            fill:true,         // 设置饼的每部分被填充的状态
            shadow:true,       //为饼的每个部分的边框设置阴影,以突出其立体效果
            shadowOffset: 2,    //设置阴影区域偏移出饼的每部分边框的距离
            shadowDepth: 5,     // 设置阴影区域的深度
            shadowAlpha: 0.07   // 设置阴影区域的透明度
        }
    },
    
    //pointLabels(数据点标签)
    //用于在数据点所在位置显示相关信息(非提示框性质)
    seriesDefaults: {
        pointLabels: {
            location:'s',//数据标签显示在数据点附近的方位
            ypadding:2   //数据标签距数据点在纵轴方向上的距离
        }
    }
    
    // Trendline(趋势线)
    // 饼状图通过seriesDefaults和series配置对象进行配置
    
    seriesDefaults: {
        trendline: {
            show: true,         // 是否显示趋势线
            color: '#666666',   // 趋势线颜色
            label: '',          // 趋势线名称
            type: 'linear',     //趋势线类型'linear'(直线), 'exponential'(幂值数线) or 'exp'
            shadow: true,       //  同grid相同属性设置
            lineWidth: 1.5,     // 趋势线宽度
            shadowAngle: 45,    //  同grid相同属性设置
            shadowOffset: 1.5,  //  同grid相同属性设置
            shadowDepth: 3,     //  同grid相同属性设置
            shadowAlpha: 0.07   // 同grid相同属性设置  
        }
    }
}

相关渲染器介绍   

1.dateAxisRenderer
    相关引用包:<script type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js" />
    该渲染器主要用于显示刻度为日期格式的坐标轴,它增强了javascript的本地数据处理能力,它几乎支持所有的日期格式。
    另外,该渲染器还提供了强大的格式化功能,它能将数据中日期字符串格式化为你需要的格式并显示在坐标轴的刻度线上。
    
    2.categoryAxisRenderer
  相关引用包:<script type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js" />
  该渲染器主要用于将显示于刻度处的值显示与两个刻度之间,当然其表达意思也发生变化,因为刻度值处值表示某个点处的值,而它则代表某个范围内的值。
  该渲染器比较适合与柱状图联合使用。
  
  3.barRenderer
  相关引用包:<script type="text/javascript" src="../plugins/jqplot.barRenderer.min.js" />
  该渲染器主要用于显示柱状图,该渲染器能够很好的控制每个组(位于一个刻度值处的各个分类)内及组间距离,并且该柱状图能够水平显示。
  
  4.cursor
  相关引用包:<script type="text/javascript" src="../plugins/jqplot.cursor.min.js" /
  该渲染器主要用于鼠标移动到图中时,鼠标在图中显示形式,常用与和高亮功能同时使用。
  该渲染器相关引用包一旦引用到当前页面会,该渲染器立即生效。
  
  5.highlighter
  相关引用包:<script type="text/javascript" src="../plugins/jqplot.highlighter.min.js" />
  该渲染器主要用于当鼠标移动到图中数据点上时,在鼠标附近显示提示栏,并将相关信息显示在提示栏。默认显示值是横纵坐标轴刻度值。当然,提示框中信息是可以根据自身需要定制的。
   该渲染器相关引用包一旦引用到当前页面会,该渲染器立即生效。 
   
   6.logAxisRenderer
   相关引用包:<script type="text/javascript" src="../plugins/jqplot.logAxisRenderer.min.js" />
   该渲染器主要用于以指数计算的方式生成坐标轴上刻度值。默认情况下,刻度值是均匀显示的,但是刻度值也可以按指数增长的方式显示。
   
   7.ohlcRenderer
   相关引用包:<script type="text/javascript" src="../plugins/jqplot.ohlcRenderer.min.js" />
   该渲染器主要用于显示甘特图。通常情况下,该渲染器与dateAxisRenderer一起使用较多
   
   8.dragable
   相关引用包:<script type="text/javascript" src="../plugins/jqplot.dragable.min.js" />
   通过该渲染器,用户能够拖动某个数据点,jqplot会自动重画拖动后的新图表。同时,被拖动的数据点的数据值也随着拖动发生变化。
   
   
   9.trendline
   相关引用包:<script type="text/javascript" src="../plugins/jqplot.trendline.min.js" />
   该渲染器主要用于对现有数据进行线性回归计算,并自动将计算结果以趋势线的形式展示出来,当用户拖动某个数据点时,趋势线亦随用户拖动而变化。
   
   10.pointLabels
   相关引用包:<script type="text/javascript" src="../plugins/jqplot.pointLabels.min.js" />
   该渲染器主要用于将数据节点相关的的信息以标签的方式放于该数据节点附近;对于相应数据为空的,其标签不显示。

分享到:
评论

相关推荐

    jqPlot Option配置对象详解

    下面将详细解析jqPlot的Option配置对象及其各个属性。 首先,`seriesColors`属性定义了默认的分类颜色。当有多个分类且分类数量不超过颜色列表长度时,会依次使用这些颜色。如果分类数量超过颜色列表,颜色会从头...

    jqplot的Option配置详解

    ### jqplot的Option配置详解 #### 一、引言 jqPlot是一款强大的JavaScript图表库,它基于jQuery构建,能够帮助开发者轻松地创建出各种复杂的图表。对于初学者来说,掌握jqPlot的核心配置对象—Option配置对象是十分...

    dhcp option配置 及交换机vlan配置

    【DHCP Option配置详解】 DHCP(动态主机配置协议)是一种网络协议,它允许网络管理员自动分配IP地址、子网掩码、默认网关等网络参数给网络中的设备。DHCP Option是DHCP协议中的一部分,它允许在DHCP响应消息中包含...

    OPENWRT系统学习配置详解

    OPENWRT系统学习配置详解 OpenWrt是一个 Linux 开源项目,提供了一个灵活、可靠的路由器操作系统。WebRocX 是基于 OpenWrt 的软件系统,用于家庭网关产品的配置管理。以下是 OpenWrt 系统学习配置详解的知识点: ...

    javascript_select_option_操作详解.txt

    ### JavaScript Select Option 操作详解 #### 一、检测是否有选中项 在处理表单时,经常需要检测用户是否已选择了某个 `&lt;select&gt;` 元素中的 `&lt;option&gt;` 项。以下是一个简单的示例来实现这一功能: ```javascript ...

    的服务器上搭建 Server 配置option 配置

    #### 三、配置过程详解 1. **安装与启用DHCP服务**: - 在Windows 2003服务器上添加DHCP服务角色。 - 完成安装后,在控制面板的“管理工具”中打开DHCP管理界面。 2. **创建作用域并分配IP地址**: - 在DHCP...

    vsftpd配置文件详解 

    ### vsftpd配置文件详解 #### 一、概述 VSFTPD (Very Secure FTP Daemon) 是一款免费开源的FTP服务程序,在Linux系统中广泛使用。它不仅提供了强大的安全性,还支持多种认证方式以及灵活的配置选项。对于Ubuntu...

    HAProxy配置文件详解和ACL功能.docx

    HAProxy是一款广泛使用的开源负载均衡器,其配置文件是实现其功能的核心部分。本文将深入讲解HAProxy配置文件的各个部分以及ACL(访问控制列表)的功能。 首先,配置文件是HAProxy的灵魂,主要包括全局配置(global...

    H3C DHCP option 43 配置方法

    H3C DHCP option 43 配置方法

    BGP MPLS配置OptionC方式跨域VNP示例(方案二).zip

    下面我们将详细探讨BGP MPLS配置Option C方式跨域VNP的原理、应用场景以及如何在ENSP(Enterprise Network Simulation Platform)上进行模拟配置。 1. **BGP MPLS Option C概述** Option C是BGP/MPLS IP VPN标准中...

    Log4j.properties配置详解

    ### Log4j.properties配置详解 #### 一、Log4j简介 Log4j是一个非常流行的Java日志框架,它能够帮助开发者轻松管理日志记录。Log4j的主要优点包括灵活性高、性能好以及易于配置。它由三个核心组件组成:记录器...

    STM8S的配置字节OPTION BYTE

    配置字节(OPTION BYTE)是这类微控制器中用于存储配置信息的重要部分,这些信息包括了诸如看门狗定时器的设置、复位管理、I/O端口的上拉电阻配置等等。正确配置OPTION BYTE对于确保STM8S微控制器的正常运行和特定...

    锐捷AC\AP和Windows server2008 DHCP配置option43跨三层管理AP

    锐捷ACAP跨三层管理,客服只会option 43 ascii #RJ#+IP这一句,就再无其它系统上使用的支持。网络也有很多关于option 43的配置,但按介绍操作都行不通,经多次偿试结合网上介绍和锐捷这一句,取长补短最后成功连通了

    由浅入深玩转华为WLAN----4 DHCP Option 43配置方法.zip

    在无线局域网(WLAN)的部署中,DHCP(动态主机配置协议)Option 43是一个关键的配置项,特别是在大型企业网络环境中。华为作为全球领先的网络设备供应商,其WLAN解决方案广泛应用于各种场景。本文将深入探讨华为...

    DHCP Snooping Option 82配置举例.pdf

    ### DHCP Snooping Option 82 配置详解 #### 一、特性简介 DHCP Snooping Option 82 是一种增强的 DHCP 技术,它主要用于记录 DHCP 客户端的位置信息,以便 DHCP 服务器能够根据这些信息为客户端分配合适的 IP ...

Global site tag (gtag.js) - Google Analytics