您的位置:时时app平台注册网站 > web前端 > jqPlot 图表中文API使用文书档案及源码和在线示例

jqPlot 图表中文API使用文书档案及源码和在线示例

2019-11-03 13:28

3. 获得鼠标的位置,把这个位置赋给div框

横坐标

show:true
gridIndex:0 //X轴所在的grid的索引,默认位于第一个grid
position:'top' / 'bottom'
offset:0 //位置偏移,有多个x轴时设置
type: //坐标轴类型

"category" :默认类目轴,适用离散的类目数据
''value'' :数值轴,连续的数据
'log' : 对数数据
'time' 时间轴,适用于连续的时序数据,会根据跨度的范围来决定
使用月,星期,日还是小时范围的刻度。

name: // 坐标轴名称
nameLocation://坐标轴名称显示位置

'start'
'middle' 或者 'center'
'end'

nameGap:15 //名称与轴线之间的距离
nameRotate:null //坐标轴名称角度旋转
inverse:false //是否反向坐标轴
boundaryGap://坐标轴两边留白

类目轴
默认为 true,这时候[刻度]只是作为分隔线,标签和数据点都会在两个[刻度]之间的带(band)中间。
非类目轴,
包括时间,数值,对数轴
是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 [min] 和 [max]后无效。
boundaryGap: ['20%', '20%']

min:
max:

max: function(value) {
return value.max - 20;
}
max:'dataMax' //取数据在该轴上的最大值作为最大刻度。

scale:false //强制包含0刻度
minInterval:

0 //自动计算坐标轴间隔大小
设置成1保证坐标轴分割刻度显示成整数

maxInterval: 3600 * 24 * 1000 //保证坐标轴分割刻度最大为一天

silent:false //是否是静态无交互
triggerEvent:false //坐标轴的标签是否响应和触发鼠标事件
axisLine:

{
  show:true  //*是否显示坐标轴线*
  onZero:true //*X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度*
  onZeroAxisIndex://*双轴时,可指定在哪个轴的 0 刻度上*
  lineStyle:
}

axisTick://坐标轴刻度

show:true
alignWithLabel:false //可以保证刻度线和标签对齐
inside:false //坐标轴刻度朝外
length:5 //坐标轴刻度的长度
lineStyle:

axisLabel:

show:true //*是否显示刻度标签*
interval:auto / 0 / 1 / 2    //*间隔几个显示一个标签*
inside:false  // *标签*
rotate:
margin:
formatter://*刻度标签内容格式
       formatter: '{value} kg'             
       formatter: function (value, index) {
             // 格式化成月/日,只在第一个刻度显示年份
            var date = new Date(value);
            var texts = [(date.getMonth()   1),  date.getDate()];
            if (index === 0) {
                             texts.unshift(date.getYear());
            }
            return texts.join('/');
       }
showMinLabel:null //*是否显示最小 tick 的 label.值 true, false, null
backgroundColor: //*文字块背景色或图片
                 {
                    image: 'xxx/xxx.png'
                   // 这里可以是图片的 URL,
                   // 或者图片的 dataURI,
                   // 或者 HTMLImageElement 对象,
                   // 或者 HTMLCanvasElement 对象。
                }
rich:// 富文本标签

splitLine/splitArea/axisPointer/data

复制代码 代码如下:

  1. 设定mychart.on('mouseover',functionx) ,mychart的鼠标悬浮事件,当鼠标移动到x轴的名称时触发这个事件.这里需要把x轴设置为

    triggerEvent: true,切记.

最终显示效果如下图所示:
图片 1
jqplot属性选项
我们在调用$.jqplot时可以传入一些参数options来自定义jqplot,部分参数options如下:

  1. x轴上添加 triggerEvent: true

    2.加入这段代码隐藏过长的文字,长度可以自己定义

    axisLabel: {

                               formatter: function(value) {
                                  var res = value;
                                  if(res.length > 5) {
                                      res = res.substring(0, 4)   "..";
                                  }
                                  return res;
                              }
                          }
                      }
    
    1. 调用 extension('这里传入你的容器'); 就可以使用了

jqplot是一款非常不错的基于jquery的图表插件,这篇文章主要帮助大家整理了jqplot的中文使用说明和在线示例及源码下载。jqplot插件在支持HTML5的浏览器上将会在canvas上呈现图表。

最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称

引入脚本文件

 

seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默认显示的分类颜色,如果分类的数量超过这里的颜色数量,
// 则从该队列中第一个位置开始重新取值赋给相应的分类
stackSeries: false, // 如果置为true并且有多个分类(如果是折线图,就必须多于一条折线), 那么每个分类(折线)
//在纵轴上的值为其前所有分类纵轴值总和与其纵,轴值相加值
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实现图表的生成和渲染,比如如果用下面的数据来初始化jqplot图表:

总之使用三步骤

$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
axes:{yaxis:{min:-10, max:240}},
series:[{color:'#5FAB78'}]
});

 

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />

图片 2

添加一个plot容器

 

jqplot需要1.4.3以上的jquery版本支持,刚才说过了,jqplot在支持HTML5 Canvas的浏览器上将以canvas呈现,否则,如果你在IE9以下版本的浏览器上则要引入excanvas.js文件,当然,jqplot的CSS文件也要同时引入,代码如下:

2. 声明一个不显示的div框,这个框是用在鼠标移到类目上,显示展开的全部的名称的.

源码下载
其官方网站:

 

这里给一个使用自定义参数的例子:

下面是源码:

复制代码 代码如下:

这里来说一下博主的实现方式

简介

 

图片 3

  1. 当类目名称长度大于5的时候 博主就把他substring了  再拼接上"..".

jqplot是一款非常不错的基于jquery的图表插件,这篇文章主要帮助大家整理了jqplot的中文使用说明和在线示例及源码下载。jqplot插件在支...

 

显示效果如下图所示:

 

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

 

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

4.添加mychart.on('mouseout',functiony) 鼠标移除事件.

开始创建plot图表

图片 4

$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);

 想上传源码的..没找到.

 

 

 

 1 var myChart = echarts.init(document.getElementById('main'));
 2 
 3             option = {
 4                     xAxis: {
 5                         triggerEvent: true,
 6                         type: 'category',
 7                         data: ['这是名称非常长的商品1', '这是名称比商品1还长很多的商品2', '这同样是名称很长的商品3', '短的商品4'],
 8                         axisLabel: {
 9                             formatter: function(value) {
10                                 var res = value;
11                                 if(res.length > 5) {
12                                     res = res.substring(0, 4)   "..";
13                                 }
14                                 return res;
15                             }
16                         }
17                     },
18                         yAxis: {
19                             type: 'value'
20                         },
21                         series: [{
22                             data: [120, 200, 150, 80],
23                             type: 'bar'
24                         }]
25                     }
26 
27                     myChart.setOption(option);
28                     
29                     extension(myChart);
30                     
31                     function extension(mychart) {
32               //判断是否创建过div框,如果创建过就不再创建了
33                         var id = document.getElementById("extension");
34                         if(!id) {
35                             var div = "<div id = 'extension' sytle="display:none"></div>"
36                             $('html').append(div);
37                         }
38 
39                         mychart.on('mouseover', function(params) {
40                             if(params.componentType == "xAxis") {
41                                 $('#extension').css({
42                                     "position": "absolute",
43                                     "color": "black",
44                                     //"border":"solid 2px white",
45                                     "font-family": "Arial",
46                                     "font-size": "20px",
47                                     "padding": "5px",
48                                     "display": "inline"
49                                 }).text(params.value);
50 
51                                 $("html").mousemove(function(event) {
52                                     var xx = event.pageX - 30;
53                                     var yy = event.pageY   20;
54                                     $('#extension').css('top', yy).css('left', xx);
55                                 });
56                             }
57                         });
58 
59                         mychart.on('mouseout', function(params) {
60                             if(params.componentType == "xAxis") {
61                                 $('#extension').css('display', 'none');
62                             }
63                         });
64 
65                     };

本文由时时app平台注册网站发布于web前端,转载请注明出处:jqPlot 图表中文API使用文书档案及源码和在线示例

关键词: