`

jqplot参数描述

 
阅读更多
jqPlot 图形报表插件简介及参数详解(jquery)

jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且,jqPlot具有插件可扩展性(Pluggability),你可以编写自己的图表样式。
功能概述:
有多种图表样式可供选择
可以自定义日期轴线
可设置旋转轴文字
自动计算趋势线
工具条提示和高亮数据点
默认最优设置,非常易于使用
以上功能在jqPlot主页中的示例页面有很多直观的展示。这里是它详细使用文档。
   缺点:柱状图无法显示具体数据值。饼状图无法显示具体百分比。
下边是搜集的详细参数配置:
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. 
    },                               
     
  
     
    // 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;" mce_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相同属性设置   
        } 
    } 
}
分享到:
评论

相关推荐

    jqplot使用手册 参数手册 中文手册

    3. **配置选项**:设置图表的参数,如标题、轴标签、颜色等。 4. **调用`$.jqplot()`**:使用jQuery选择器和`$.jqplot()`方法来创建图表。 例如,创建一个简单的折线图: ```javascript var data = [[1, 2], [3, 5...

    jqplot

    4. **绘制图表**:展示如何使用 jqPlot 的 API 来绘制图表,包括基本的 `$.jqplot` 函数调用和参数设置。 5. **插件使用**:介绍如何启用和配置 jqPlot 插件,以实现更高级的功能。 6. **事件处理**:阐述如何监听...

    jqplot配置参数.pdf

    这些参数的灵活配置使得jqPlot可以满足复杂多样的图表设计需求。为了获取更详细的使用方法和示例,可以参考jqPlot的官方文档。总的来说,jqPlot是一个强大而灵活的图表插件,适用于需要在网页中展示数据的项目。

    jqplot配置参数.docx

    jqPlot 是一个基于 jQuery 库的JavaScript图表绘制插件,它提供了一种高效且灵活的方式来在网页中创建各种...通过学习和掌握 jqPlot 的配置参数,我们可以创建出满足业务需求的高质量图表,提升数据可视化的用户体验。

    jqplot文档

    ### jqPlot文档解析 #### 简介 jqPlot 是一个纯 JavaScript 绘图插件,为 jQuery 提供了强大的图表绘制功能。该插件版本为 1.0.8,自 2009 年至 2015 年由 Chris Leonello 开发并维护。它支持在个人或商业项目中...

    jqplot例子

    **jqPlot 概述** jqPlot 是一个基于 jQuery 的数据可视化库,用于创建高质量的、交互式的图表。它提供了一套全面的API和各种图表类型,适用于数据展示和分析。jqPlot 具有高度可定制性,允许用户通过配置选项自定义...

    jquery 图形报表插件jqplot 简介及参数详解

    在使用 jqPlot 时,开发者可以通过调整各种参数来定制图表的外观和行为。例如,`seriesColors` 参数允许你设置默认分类颜色,当类别数量超过预设颜色时,颜色会循环使用。`stackSeries` 参数用于决定是否将各个分类...

    jqplot js图标控件

    2. **灵活性**:jqPlot支持多种图表类型,且提供大量的可配置参数,可以定制出独特的图表样式,适应不同的数据可视化需求。 3. **交互性**:jqPlot的图表支持鼠标悬停时显示数据提示、点击事件响应以及图表的动态...

    jqPlot图表中文API

    jqPlot是一款基于jQuery的图表插件,用于在网页上创建各种动态、交互式的图表,如柱状图、线性图、饼图等。它在现代支持HTML5的浏览器上使用canvas元素来绘制图表,而在不支持canvas的旧版IE浏览器(如IE9以下版本)...

    jqPlot报表参数

    在参数配置方面,jqPlot 提供了一系列的选项,如 `seriesColors` 用于设置默认分类颜色,`stackSeries` 控制是否堆叠系列数据,`title` 设置图表标题,`axisDefaults` 包含了关于坐标轴的配置,如 `show` 控制轴是否...

    jqplot-饼图例子

    没啥可描述的,就是用jqplot做的例子,无语了,这还有文字限制,一点都不自由。

    jqplot的Option配置详解

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

    jqplot1.0.4

    《jqPlot 1.0.4:打造丰富的数据可视化图表》 jqPlot 是一款功能强大的JavaScript图表库,专为Web应用程序提供丰富的数据可视化解决方案。在版本1.0.4中,它延续了其一贯的优秀特性,使得创建饼状图、柱状图、线状...

    jqplot饼状图示例

    **jqPlot饼状图示例** jqPlot是一个强大的JavaScript库,用于在网页上创建动态、交互式的图表。它提供了一套丰富的选项和插件,使得数据可视化变得简单易行。在本示例中,我们将专注于如何使用jqPlot来创建饼状图,...

    jquery charts插件jqplot

    通过设置`series`和`axes`参数,可以定制线条颜色、样式和坐标轴范围。例如,以下代码创建一个简单的线图: ```javascript var data = [[1, 2], [3, 4], [5, 6]]; var plot1 = $.jqplot('chart1', [data], { ...

    jqplot1.0.8_优秀且完全免费的JS图表插件

    用JS作图形报表,有多个插件可选择,其中HighCharts、JqPlot、JsChart是使用比较多的,但HighCharts和JsChart只能用作个人使用、为了以后项目中能使用,很多人选择JqPlot(个人和商业都免费)。俺最近开发项目进要...

    jquery.jqplot 绘图插件

    jqPlot提供大量配置参数,允许用户自定义图表的各个方面,如颜色、线条样式、轴标签、网格线、图例等。例如,可以通过以下方式改变线的颜色和宽度: ```javascript var options = { seriesDefaults: { ...

    fusionChars,highchars,jqplot绘图插件Demo

    该插件的一大优点在于其灵活性,允许开发者通过设置各种配置参数来调整图表的外观和行为。 `fusionChars`和`highchars`在`jqPlot`中可能是指FusionCharts和Highcharts这两个独立的图表库。FusionCharts是一款功能...

    jqplot 简易示例

    **jqPlot简介** jqPlot是基于JavaScript的图表绘制库,它允许开发者在网页上创建出交互式的、富有视觉吸引力的图表。jqPlot以其高度可定制性、灵活性和强大的功能著称,适合各种类型的数据可视化需求,包括折线图、...

Global site tag (gtag.js) - Google Analytics