精华内容
下载资源
问答
  • jqplot

    2013-01-08 15:23:30
    jqplot
  • jqPlot

    2019-10-06 01:48:46
    jqPlot jqPlot Charts and Graphs for jQueryA Versatile and Expandable jQuery Plotting Plugin!jqPlot is a plotting and charting plugin ...
    jqPlot Charts and Graphs for jQuery
    A Versatile and Expandable jQuery Plotting Plugin!
    jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features:

    Numerous chart style options.
    Date axes with customizable formatting.
    Up to 9 Y axes.
    Rotated axis text.
    Automatic trend line computation.
    Tooltips and data point highlighting.
    Sensible defaults for ease of use.

    jqPlot is an open source project by Chris Leonello
    leftcharts

    Free and Open Source...but worth more!
    Consider a Donation.

    jqPlot's Strongest Feature is its Pluggability!

    Computation and drawing of lines, axes, shadows even the grid itself is handled by pluggable "renderers". Not only are the plot elements customizable, plugins can expand functionality of the plot too! There are plenty of hooks into the core jqPlot code allowing for custom event handlers, creation of new plot types, adding canvases to the plot, and more!
    linestyles2 barchart shadow2
    Numerous line style options with 6 built in marker styles!

    Horizontal and vertical Bar charts!

    Shadow control on lines, markers, the grid, everything!
    dragdrop2 logaxes2 trendline2
    Drag and drop points with auto updating of data!

    Log Axes with flexible tick marks!

    Trend lines computed automatically!

    jqPlot has been tested on IE 6, IE 7, IE 8, Firefox, Safari, and Opera. You can see jqPlot in action on the tests & examples page.


    posted on 2011-11-04 18:50 lexus 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/lexus/archive/2011/11/04/2236558.html

    展开全文
  • JQPLOT

    千次阅读 2013-08-23 15:44:42
    1 jquery jqPlot使用教程 简介 jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线形图、条形图、饼形图。jqPlot支持为图表设置各种不同的样式,提供Tooltips,数据点高亮显示等功能柱状图可以提供坐标轴定制...

    1 jquery jqPlot使用教程

    简介

    jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线形图、条形图、饼形图。jqPlot支持为图表设置各种不同的样式,提供Tooltips,数据点高亮显示等功能柱状图可以提供坐标轴定制、柱条宽度、颜色定制和阴影设置等等。目前jqPlot支持大部分主流的浏览器,包括:IE 7IE 8FirefoxSafariChromeOpera

    它的主要功能包括

    l  可选择多种图标样式

    l  可自定义日期轴线

    l  可设置旋转轴文字

    l  自动计算趋势线

    l  工具条提示和高亮数据点

    l  默认最优设置,非常易于使用

    使用步骤

                                                 1.     引入脚本及样式文件。

    <scriptlanguage="javascript" type="text/javascript"src="excanvas.js"></script>

    <scriptlanguage="javascript" type="text/javascript"src="jquery.min.js"></script>

    <scriptlanguage="javascript" type="text/javascript"src="jquery.jqplot.min.js"></script>

    <link rel="stylesheet"type="text/css" href="jquery.jqplot.css" />

                                                 2.     添加一个plot容器。

    我们可以在页面上为jqplot添加一个容器,比如div,但要注意的是,要为这个div容器指定宽度好高度,如下代码:

    <div id="chartdiv"style="height:400px;width:300px; "></div>

                                                 3.     创建plot图表。

    接下来我们在上面创建好的容器中通过调用$.jqplot实现图表的生成和渲染。

    jqPlot整的来说有三个地方需要配置。格式如:$.jqplot(target, data,options);

    l  target:要显示的位置。比如要渲染到id为chartdiv中,target'即为’ chartdiv’;

    l  data:显示的数据。它是一个二位数组,形式如下:                              [[1,2],[2,4],[3,6],[4,8],[5,41],[6,12]],

    l  options:其它配置 (该配置项比较复杂,放在下一步介绍)。

                                                 4.     jqPlot 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 torenderer 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 todraw 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 topass to the renderer. Note, the default

    // CanvasGridRenderer takes noadditional 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 onlyspecified axes groups in tooltip. Would specify like:

    // [['xaxis', 'yaxis'], ['xaxis','y2axis']]. By default, all axes

    // combinations with for the seriesin 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><spanstyle="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相同属性设置

    }

    }

    }

    不同的渲染器(Renderer)需要加载对应的的js。

     

    相关参数说明如下:

    a.         dateAxisRenderer

    相关引用包:

    <scripttype="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"/>

    该渲染器主要用于显示刻度为日期格式的坐标轴,它增强了javascript的本地数据处理能力,它几乎支持所有的日期格式。

    另外,该渲染器还提供了强大的格式化功能,它能将数据中日期字符串格式化为你需要的格式并显示在坐标轴的刻度线上。

    b.        categoryAxisRenderer

    相关引用包:

    <scripttype="text/javascript"src="../plugins/jqplot.categoryAxisRenderer.min.js" />

    该渲染器主要用于将显示于刻度处的值显示与两个刻度之间,当然其表达意思也发生变化,因为刻度值处值表示某个点处的值,而它则代表某个范围内的值。

    该渲染器比较适合与柱状图联合使用。

    c.         barRenderer

    相关引用包:

    <scripttype="text/javascript" src="../plugins/jqplot.barRenderer.min.js"/>

    该渲染器主要用于显示柱状图,该渲染器能够很好的控制每个组(位于一个刻度值处的各个分类)内及组间距离,并且该柱状图能够水平显示。

    d.        cursor

    相关引用包:

    <scripttype="text/javascript"src="../plugins/jqplot.cursor.min.js" /

    该渲染器主要用于鼠标移动到图中时,鼠标在图中显示形式,常用与和高亮功能同时使用。

    该渲染器相关引用包一旦引用到当前页面会,该渲染器立即生效。

    e.         highlighter

    相关引用包:

    <scripttype="text/javascript"src="../plugins/jqplot.highlighter.min.js" />

    该渲染器主要用于当鼠标移动到图中数据点上时,在鼠标附近显示提示栏,并将相关信息显示在提示栏。默认显示值是横纵坐标轴刻度值。当然,提示框中信息是可以根据自身需要定制的。

    该渲染器相关引用包一旦引用到当前页面会,该渲染器立即生效。

    f.         logAxisRenderer

    相关引用包:

    <scripttype="text/javascript"src="../plugins/jqplot.logAxisRenderer.min.js" />

    该渲染器主要用于以指数计算的方式生成坐标轴上刻度值。默认情况下,刻度值是均匀显示的,但是刻度值也可以按指数增长的方式显示。

    g.        ohlcRenderer

    相关引用包:

    <scripttype="text/javascript" src="../plugins/jqplot.ohlcRenderer.min.js"/>

    该渲染器主要用于显示甘特图。通常情况下,该渲染器与dateAxisRenderer一起使用较多。

    h.        dragable

    相关引用包:

    <scripttype="text/javascript"src="../plugins/jqplot.dragable.min.js" />

    通过该渲染器,用户能够拖动某个数据点,jqplot会自动重画拖动后的新图表。同时,被拖动的数据点的数据值也随着拖动发生变化。

    i.          trendline

    相关引用包:

    <script type="text/javascript"src="../plugins/jqplot.trendline.min.js" />

    该渲染器主要用于对现有数据进行线性回归计算,并自动将计算结果以趋势线的形式展示出来,当用户拖动某个数据点时,趋势线亦随用户拖动而变化。

    j.          pointLabels

    相关引用包:

    <scripttype="text/javascript"src="../plugins/jqplot.pointLabels.min.js" />

    该渲染器主要用于将数据节点相关的的信息以标签的方式放于该数据节点附近;对于相应数据为空的,其标签不显示。

    效果图展示

                                                 1.     柱状图:

    l  单个分类:

    图1-1 单个分类展示

     

    l  两个分类:

    图1-2 两个分类展示

     

                                                 2.     线性图:

    l  单个分类:

    图1-3 单个分类展示

     

    l  两个分类:

    图1-4 两个分类展示

     

    缺陷说明

    Y轴上刻度值显示的算法存在问题,存在柱状图高度大于最大刻度值的情况,屏蔽方式是根据要展示的数据,我们自己计算出最大值(maxHeight)。

    yaxis: {min:0,max:maxHeight}.

    展开全文
  • jQplot

    2017-11-01 17:50:00
    renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks }, // Pad the y axis just a little so bars can get close to, but // not touch, the grid boundaries. 1.2 is the default padding. yaxis:...

    1.调整柱状图上方文字,距离柱状图顶部的距离

    2.文字倾斜显示

     tickOptions: {
       fontSize: '13pt',
       angle:40
    }

     3.保留1位小数

     axes: {
                // Use a category axis on the x axis and use our custom ticks.
                xaxis: {
                  renderer: $.jqplot.CategoryAxisRenderer,
                  ticks: ticks
                },
                // Pad the y axis just a little so bars can get close to, but
                // not touch, the grid boundaries.  1.2 is the default padding.
                yaxis: {
                  pad: 1.5,
                  min:0,
                   tickOptions: {formatString: '%.1f}
                }
              }

     4.横坐标文字倾斜显示

    axesDefaults: { //轴的刻度值,字体大小,字体类型,字体角度
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                // labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                tickOptions: {
                    // fontSize: '9pt',   
                    // angle: -20 //刻度倾斜角度
                }
            },

     

    转载于:https://www.cnblogs.com/lizhihui/p/7767671.html

    展开全文
  • jqplot组件

    2018-03-12 09:39:53
    jqplot的下载地址,包含例子和代码,可以粘贴使用,。。。。。
  • jqplot文档

    2015-09-10 22:58:14
    jqplot官方文档,包含所有的api。 居家旅行必备
  • jqPlot绘图

    2013-12-14 16:52:08
    jqPlot是Jquery中的实现图形的一个插件 使用jqPlot可以做出美观图形
  • JQplot资料

    2012-10-12 10:32:53
    JQplot网页资料
  • jqplot1.0.8

    2014-02-12 23:26:21
    jquery.jqplot.1.0.8r1250
  • jqplot报表

    2012-12-12 21:16:39
    jqplot报表的实现,内有多种报表的实现,及jqplot的API。
  • jqplot1.0.3

    2012-08-27 23:43:25
    jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features: Numerous chart style options. Date axes with ...
  • jqplot例子

    2012-02-17 00:23:30
    官方jqplot chart 例子,非常丰富。应有尽有。。
  • 如果看过本文姊妹篇《jqPlot——基于jquery的图表绘制工具》的朋友,应该知道jqPlot大致的操作方法;如果还是不太清楚的话,可以参考jqPlot官方网站的使用方法介绍。
  • <html xmlns="http://www.w3.org/1999/xhtml"> <head> <... charset=utf-8" /> ...link href="js/jqplot/jquery.jqplot.min.css" rel="stylesheet" />...script src="js/jqplot/jquery.jqplot.min
  • jqplot绘图工具

    2015-10-02 09:51:46
    jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图、柱状图和饼图。jqPlot支持为图表设置各种不同的样式。提供Tooltips,数据点高亮显示等功能。
  • jqplot资料集合

    2012-08-01 08:22:59
    自己整理的一些jqplot文档资料,包含jqplot插件包,jqplot:jquery UI插件
  • jqPlot报表参数

    2014-04-02 17:36:09
    jqPlot 图形报表插件简介及参数详解(jquery) 前边也讲过一个基于java的图形报表,功能及外观也不错,但存在通用性的问题。所以我们来学一个具有易用性+兼容性+可扩展性的js图表插件。 jqPlot是一款基于jquery类库的...
  • jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且,jqPlot具有插件可扩展性(Pluggability),你可以编写自己的图表样式。
  • JQPlot 手册

    千次阅读 2017-01-25 16:46:00
    jqPlot整的来说有三个地方需要配置。格式如:  $.jqplot(‘target’, data, options);target:要显示的位置。data:显示的数据。options:其它配置 seriesColors: [ "#4bb2c5", "#c5b47f",

    这里贡献上中文教程,基本上所有的api都很齐全,供有需要的童鞋们瞧瞧,更重要的是作为自己滴收藏~~哦耶耶~

    jqPlot整的来说有三个地方需要配置。格式如:
        $.jqplot(‘target’, data, options);target:要显示的位置。data:显示的数据。options:其它配置

    seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
            "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默认显示的分类颜色,如果分类的数量超过这里的颜色数量,则从该队列中第一个位置开始重新取值赋给相应的分类  
    stackSeries: false, // 如果置为true并且有多个分类(如果是折线图,就必须多于一条折线), 那么每个分类(折线)在纵轴上的值为其前所有分类纵轴值总和与其纵,轴值相加值(eg,                   当前分类纵轴值为Y3
      title: '',     //设置当前图的标题

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

        axesDefaults: {
            show: false,    是否自动显示坐标轴。
            min: null,      横(纵)轴最小刻度值
            max: null,       横(纵)轴最大刻度值
            pad: 1.2,       横(纵)轴度值增涨因子
            ticks: [],     //设置横(纵)坐标的刻度上的值,可为该ticks数组中的值
            numberTicks: undefined,//一个相除因子,用于设置横(纵)坐标刻度间隔,横(纵)坐标刻度间隔值=横(纵)坐标区间长度/(numberTicks-1)
            renderer: $.jqplot.LinearAxisRenderer,  // 设置横(纵)轴上数据加载的渲染器
            rendererOptions: {},   // 设置renderer的Option配置对象,线状图不需要设置
            tickOptions: {
                mark: 'outside',    // 设置刻度在坐标轴上的显示方式:分为:坐标轴外显示,内显示,和穿过显示;其值分别为 'outside', 'inside' or '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: {
                // same options as axesDefaults
            },
            yaxis: {
                // same options as axesDefaults
            },
            x2axis: {
                // same options as axesDefaults
            },
            y2axis: {
                // same options as axesDefaults
            }
        },

        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,   // Opacity of the shadow.
            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;" 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是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图。jqPlot支持为图表设置各种不同的样式。提供Tooltips,数据点高亮显示等功能。 官网:http://www.jqplot.com/ 这里贡献上中文教程,基本上所有的...
  • jqPlotjqPlot入门

    2014-07-12 13:48:24
    由于项目信息统计需要生成一些图表,找了一些免费的开源框架,最后决定使用jqPlot。1)首先提供一下学习链接 官网的Option配置 : http://www.jqplot.com/docs/files/jqPlotOptions-txt.html Option配置中文版 : ...
  • jqplot饼状图示例

    2018-08-23 10:01:39
    jqplot饼状统计图,很鲜明很简单的例子。如需其他图形只需改动小部分即可。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 646
精华内容 258
关键字:

jqplot