X轴内容过长自动隐藏,图表中文API使用文书档案及源码和在线示例

By admin in 4858美高梅 on 2019年4月3日

方今商户做项目,使用echarts做开发,遭遇一些数据的称谓非常短造成图例体现的法力不是很好,自身写了贰个办法,当X轴内容过长时自动隐藏,鼠标移动上去呈现任何名号

横坐标

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 //机动测算坐标轴间隔大小
安装成一保障坐标轴分割刻度展现成整数

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

简介

简介

样例:

jqplot是壹款特别正确的依照jquery的图片插件,那篇作品首要接济我们整理了jqplot的中文使用验证和在线示例及源码下载。jqplot插件在支撑HTML伍的浏览器军长会在canvas上显现图表。

jqplot是壹款非常不易的依据jquery的图纸插件,那篇小说首要援救大家整理了jqplot的中文使用表达和在线示例及源码下载。jqplot插件在辅助HTML五的浏览器元帅会在canvas上海展览中心现图表。

4858美高梅 1

引入脚本文件

引入脚本文件

 

jqplot要求1.四.3之上的jquery版本援救,刚才说过了,jqplot在援助HTML五Canvas的浏览器中校以canvas彰显,不然,要是您在IE玖以下版本的浏览器上则要引入excanvas.js文件,当然,jqplot的CSS文件也要同时引入,代码如下:

jqplot供给1.4.三上述的jquery版本扶助,刚才说过了,jqplot在支持HTML伍Canvas的浏览器上将以canvas展现,不然,即使你在IE玖以下版本的浏览器上则要引入excanvas.js文件,当然,jqplot的CSS文件也要同时引入,代码如下:

4858美高梅 2

复制代码 代码如下:

复制代码 代码如下:

图二是鼠标移动到名称突显的,怎么带着鼠标一起截图书馆和博物馆主不是很驾驭,不要在意这个细节好了.

<!–[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”
/>

<!–[if lt IE 9]><script language=”javascript”
type=”text/javascript”
src=”excanvas.js”></script><![endif]–>
X轴内容过长自动隐藏,图表中文API使用文书档案及源码和在线示例。<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”
/>

 

累加一个plot容器

增加一个plot容器

此地来说一下博主的贯彻形式

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

咱俩得以在页面上为jqplot添加一个器皿,比如div,但要注意的是,要为那么些div容器钦赐宽度好中度,如下代码:

 

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

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

  1. 设定mychart.on(‘mouseover’,functionx)
    ,mychart的鼠标悬浮事件,当鼠标移动到x轴的名称时接触那个事件.那里须要把x轴设置为

    triggerEvent: true,切记.

发端创制plot图表

起来创造plot图表

 

接下去大家在地点创设好的器皿中经过调用$.jqplot达成图表的变型和渲染,比如假使用上面包车型大巴数目来初阶化jqplot图表:

接下去我们在地方创制好的器皿中经过调用$.jqplot完毕图表的浮动和渲染,比如假如用下边包车型客车数量来发轫化jqplot图表:

二.
宣称二个不出示的div框,这一个框是用在鼠标移到类目上,显示展开的方方面面包车型大巴称号的.

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

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

 

最终突显效果如下图所示:
4858美高梅 3
jqplot属性选项
作者们在调用$.jqplot时得以流传一些参数options来自定义jqplot,部分参数options如下:

最终显示效果如下图所示:
4858美高梅 4
jqplot属性选项
大家在调用$.jqplot时能够流传壹些参数options来自定义jqplot,部分参数options如下:

3.
收获鼠标的岗位,把那几个岗位赋给div框

复制代码 代码如下:

复制代码 代码如下:

 

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: 一.2, 横(纵)轴度值增涨因子
ticks: [], //设置横(纵)坐标的刻度上的值,可为该ticks数组中的值
numberTicks:
undefined,//一个相除因子,用于安装横(纵)坐标刻度间隔,横(纵)坐标刻度间隔值=横(纵)坐标区间长度/(numberTicks-一)
renderer: $.jqplot.LinearAxisRenderer, //
设置横(纵)轴上多少加载的渲染器
rendererOptions: {}, // 设置renderer的Option配置对象,线状图不需求安装
tickOptions: {
mark: ‘outside’, //
设置刻度在坐标轴上的展现格局:分为:坐标轴外呈现,内展示,和通过呈现;其值分别为
‘outside’, ‘inside’ or ‘cross’。
show马克: true, //设置是不是出示刻度
showGridline: true, // 是或不是在图片区域彰显刻度值方向的网格
markSize: 4, //
每一个刻度线顶点距刻度线在坐标轴上点距离(像素为单位)假诺mark值为 ‘cross’,
那么每一种刻度线都有上终点和下顶点,刻度线与坐标轴
在刻度线中间交叉,那么此时这一个距离×二
show: true,
//是或不是出示刻度线,与刻度线同方向的网格线,以及坐标轴上的刻度值
showLabel: true, //是还是不是出示刻度线以及坐标轴上的刻度值
formatString: ”, //设置坐标轴上刻度值展现格式,eg:’%b %#d,
%Y’表示格式”月 日,年”,”AUG 30,二零一零”
fontSize:’10px’, //刻度值的字体大小
fontFamily:’Tahoma’, //刻度值上字体
angle:40, //刻度值与坐标轴夹角,角度为坐标轴正向顺时针方向
fontWeight:’normal’, //字体的粗细
fontStretch:1//刻度值在所在倾向(坐标轴外)上的展开(拉伸)度
}
showTicks: true, //是不是出示刻度线以及坐标轴上的刻度值,
showTick马科斯: true, // 设置是还是不是出示刻度
useSeriesColor: true
//假若有两个纵(横)坐标轴,通过该属性设置这几个坐标轴是还是不是以分裂颜色呈现
},
axes: {
xaxis: {
// same options as axesDefaults
},
yaxis: {
// same options as axesDefaults
},
x2axis: {
// same options as axesDefaults
},
y2axis: {
// same options as axesDefaults
4858美高梅 ,}
},
seriesDefaults:
{//借使有多个分类,这可经过该配置属性设置各类分类的共性属性
show: true, //设置是或不是渲染整个图表区域(即体现图表中剧情).
xaxis: ‘xaxis’, // either ‘xaxis’ or ‘x2axis’.
yaxis: ‘yaxis’, // either ‘yaxis’ or ‘y2axis’.
label: ”, // 用于映以往分拣名称框中的归类名称.
color: ”, // 分类在图标中代表(折现,柱状图等)的颜色.
lineWidth: 贰.五, // 分类图(尤其是折线图)哪宽度.
shadow: true, // 各图在图片中是还是不是出示阴影区域.
shadowAngle: 4伍, //参考grid中一样参数.
shadowOffset: 一.二5, //参考grid中一致参数.
shadowDepth: 三, //参考grid中相同参数.
shadowAlpha: 0.1, // Opacity of the shadow.
showLine: true, //是或不是出示图表中的折线(折线图中的折线)
show马克尔: 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: 二, //
数据点各类的边的宽度(假诺设置过大,各类边会重复,会显得的近乎于实心点)
size: 玖, // 数据点的高低
color: ‘#66666陆’ // 数据点的水彩
shadow: true, // 是或不是为数据点展现阴影区(扩展立体效果)
shadowAngle: 肆五, // 阴影区角度,x轴顺时针方向
shadowOffset: 一, // 参考grid中一样参数
shadowDepth: 三, //参考grid中1致参数
shadowAlpha: 0.0七 // 参考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: ‘#fffdf陆’, // 设置任何图表区域的背景象
borderColor: ‘#99999九’, // 设置图表的(最外侧)边框的水彩
borderWidth: 二.0, //设置图表的(最外面)边框宽度
shadow: true, // 为一切图标(最外面)边框设置阴影,以优秀其立体效果
shadowAngle: 四五, // 设置阴影区域的角度,从x轴顺时针方向旋转
shadowOffset: 1.五, // 设置阴影区域偏移出图片边框的离开
shadowWidth: 3, // 设置阴影区域的上涨幅度
shadowDepth: 3, // 设置影音区域重叠阴影的多少
shadowAlpha: 0.0七 // 设置阴影区域的光滑度
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: 捌, //设置同1分类四个柱状条之间的相距(px)
barMargin: 10,
//设置分化分类的七个柱状条之间的相距(px)(同二个横坐标表点上)
barDirection: ‘vertical’, //设置柱状图展现的趋势:垂直呈现和水平显得
//,暗中认可垂直展现 vertical or horizontal.
barWidth: null, // 设置柱状图中各样柱状条的上涨幅度
shadowOffset: 二, // 同grid相同属性设置
shadowDepth: 5, // 同grid相同属性设置
shadowAlpha: 0.捌, // 同grid相同属性设置
}
},
// Cursor(光标)
// 鼠标移动到图中时,鼠标在图中彰显格局,常与和高亮作用并且接纳
//别的,通过设置该属性的zoom相关属性来对图中某些区域钻取(就选定区域推广)
//该配置对象直接在option下布署
cursor: {
style: ‘crosshair’,
//当鼠标移动到图片上时,鼠标的显得样式,该属性值为css类
show: true, //是还是不是出示光标
showTooltip: true, // 是或不是出示提醒消息栏
followMouse: false, //光标的唤起消息栏是或不是随光标(鼠标)一起活动
tooltipLocation: ‘se’, //
光标提醒消息栏的职位设置。要是followMouse=true,那么该地点为
//提醒消息栏相对于光标的职位。不然,为光标提醒音信栏在图标中的地方
// 该属性可选值: n, ne, e, se, etc.
tooltipOffset: 陆,
//提示消息栏距鼠标(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’(Infiniti制).
},
},
// Highlighter(高亮)
//设置高亮动作option属性对象
//鼠标移动到有些数据点上时,该数据点增大并体现提醒音信框
//该配置对象直接在option下安插
highlighter: {
lineWidthAdjust: 二.五,
//当鼠标移动到推广的数据点上时,设置增大的数据点的急剧
// 近年来仅适用于非实心数据点
sizeAdjust: 伍, // 当鼠标移动到数据点上时,数据点扩展的增量增量
showTooltip: true, // 是还是不是出示提醒音信栏
tooltipLocation: ‘nw’, // 提醒新闻呈现地方(英文方向的首写字母): n, ne,
e, se, s, sw, w, nw.
fadeTooltip: true, // 设置提示消息栏出现和消失的办法(是还是不是淡入淡出)
tooltipFadeSpeed: “fast”//设置提示音讯栏淡入淡出的快慢: slow, def,
fast, 或许是3个纳秒数的值.
tooltipOffset: 2, //
提醒消息栏据被高亮呈现的数据点的晃动地方,以像素计。
tooltipAxes: ‘both’, //
提示音信框呈现数据点这些坐标轴上的值,如今有横/纵/横纵二种艺术。
//值分别为 x, y or xy.
tooltipSeparator: ‘, ‘ // 提示新闻栏不相同值之间的区间符号
useAxesFormatters: true //
提醒音讯框中数据呈现的格式是还是不是和该多少在坐标轴上出示格式一致
tooltipFormatString: ‘%.5P’ //
用于安装提醒新闻框中多少突显的格式,前提条件是useAxesFormatters
// 为false. 此时音信提示框中数据格式不再与坐标轴1致,而是以此为准
//同时,该属性还援救html格式字符串
//eg:'<b><i><span style=”color:red;”
mce_style=”color:red;”>hello</span></i></b>
%.2f’
},
// LogAxisRenderer(指数渲染器)
// 该渲染器只有两脾性情,
指数渲染器通过axesDefaults和axes配置对象开始展览布署
axesDefaults: {
base: 拾, // 指数的底数
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.0七 // 设置阴影区域的反射率
}
},
//pointLabels(数据点标签)
//用于在数据点所在地点显示相关音信(非提醒框性质)
seriesDefaults: {
pointLabels: {
location:’s’,//数据标签呈现在数据点周边的方位
ypadding:二 //数据标签距数据点在纵轴方向上的距离
}
}
// Trendline(趋势线)
// 饼状图通过seriesDefaults和series配置对象举办配备
seriesDefaults: {
trendline: {
show: true, // 是或不是出示趋势线
color: ‘#66666陆’, // 趋势线颜色
label: ”, // 趋势线名称
type: ‘linear’, //趋势线类型’linear’(直线), ‘exponential’(幂值数线)
or ‘exp’
shadow: true, // 同grid相同属性设置
lineWidth: 一.伍, // 趋势线宽度
shadowAngle: 45, // 同grid相同属性设置
shadowOffset: 一.伍, // 同grid相同属性设置
shadowDepth: 3, // 同grid相同属性设置
shadowAlpha: 0.07 // 同grid相同属性设置
}
}
}

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: 壹.二, 横(纵)轴度值增涨因子
ticks: [], //设置横(纵)坐标的刻度上的值,可为该ticks数组中的值
numberTicks:
undefined,//二个相除因子,用于安装横(纵)坐标刻度间隔,横(纵)坐标刻度间隔值=横(纵)坐标区间长度/(numberTicks-一)
renderer: $.jqplot.LinearAxisRenderer, //
设置横(纵)轴上数据加载的渲染器
rendererOptions: {}, // 设置renderer的Option配置对象,线状图不供给设置
tickOptions: {
mark: ‘outside’, //
设置刻度在坐标轴上的展现情势:分为:坐标轴外展现,内展现,和通过显示;其值分别为
‘outside’, ‘inside’ or ‘cross’。
show马克: true, //设置是或不是出示刻度
showGridline: true, // 是不是在图片区域显示刻度值方向的网格
markSize: 四, //
每种刻度线顶点距刻度线在坐标轴上点距离(像素为单位)如若mark值为 ‘cross’,
那么各个刻度线都有上终点和下顶点,刻度线与坐标轴
在刻度线中间交叉,那么此时那么些距离×2
show: true,
//是不是出示刻度线,与刻度线同方向的网格线,以及坐标轴上的刻度值
showLabel: true, //是不是出示刻度线以及坐标轴上的刻度值
formatString: ”, //设置坐标轴上刻度值展现格式,eg:’%b %#d,
%Y’表示格式”月 日,年”,”AUG 30,二零一零”
fontSize:’10px’, //刻度值的字体大小
fontFamily:’Tahoma’, //刻度值上字体
angle:40, //刻度值与坐标轴夹角,角度为坐标轴正向顺时针方向
fontWeight:’normal’, //字体的粗细
fontStretch:1//刻度值在所在可行性(坐标轴外)上的伸展(拉伸)度
}
showTicks: true, //是不是出示刻度线以及坐标轴上的刻度值,
showTick马科斯: 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: 二.5, // 分类图(尤其是折线图)哪宽度.
shadow: true, // 各图在图片中是还是不是出示阴影区域.
shadowAngle: 四五, //参考grid中平等参数.
shadowOffset: 一.二伍, //参考grid中相同参数.
shadowDepth: 3, //参考grid中壹律参数.
shadowAlpha: 0.1, // Opacity of the shadow.
showLine: true, //是或不是出示图表中的折线(折线图中的折线)
show马克尔: 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: 玖, // 数据点的高低
color: ‘#66666六’ // 数据点的颜色
shadow: true, // 是不是为数据点突显阴影区(扩大立体效果)
shadowAngle: 四五, // 阴影区角度,x轴顺时针方向
shadowOffset: 一, // 参考grid中1律参数
shadowDepth: 三, //参考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: 1贰, // 分类名称框距图表区域上方框的距离(单位px)
yoffset: 12, // 分类名称框距图表区域左侧框的距离(单位px)
background:” //分类名称框距图表区域背景观
textColor:” //分类名称框距图表区域内字体颜色
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: ‘#cccccc’ // 设置任何图标区域网格背景线的水彩
background: ‘#fffdf六’, // 设置总体图表区域的背景观
borderColor: ‘#99999九’, // 设置图表的(最外侧)边框的颜色
borderWidth: 2.0, //设置图表的(最外面)边框宽度
shadow: true, // 为总体图标(最外面)边框设置阴影,以优异其立体效果
shadowAngle: 四伍, // 设置阴影区域的角度,从x轴顺时针方向旋转
shadowOffset: 1.5, // 设置阴影区域偏移出图片边框的离开
shadowWidth: 3, // 设置阴影区域的肥瘦
shadowDepth: 三, // 设置影音区域重叠阴影的数额
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: 八, //设置同1分类七个柱状条之间的偏离(px)
barMargin: 十,
//设置不一致分类的三个柱状条之间的相距(px)(同七个横坐标表点上)
barDirection: ‘vertical’, //设置柱状图显示的主旋律:垂直彰显和水准显得
//,默许垂直显示 vertical or horizontal.
barWidth: null, // 设置柱状图中各样柱状条的上升幅度
shadowOffset: 贰, // 同grid相同属性设置
shadowDepth: 伍, // 同grid相同属性设置
shadowAlpha: 0.八, // 同grid相同属性设置
}
},
// Cursor(光标)
// 鼠标移动到图中时,鼠标在图中彰显方式,常与和高亮功效并且使用
//其它,通过安装该属性的zoom相关属性来对图中某些区域钻取(就选定区域推广)
//该配置对象直接在option下陈设
cursor: {
style: ‘crosshair’,
//当鼠标移动到图片上时,鼠标的彰显样式,该属性值为css类
show: true, //是不是出示光标
showTooltip: true, // 是还是不是出示提示消息栏
followMouse: false, //光标的唤起音信栏是或不是随光标(鼠标)1起运动
tooltipLocation: ‘se’, //
光标提醒音讯栏的地方设置。假诺followMouse=true,那么该岗位为
//提醒音信栏相对于光标的岗位。不然,为光标提示音信栏在图标中的地点
// 该属性可选值: n, ne, e, se, etc.
tooltipOffset: 陆,
//提醒音讯栏距鼠标(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’(Infiniti制).
},
},
// Highlighter(高亮)
//设置高亮动作option属性对象
//鼠标移动到某些数据点上时,该数据点增大并展现提醒新闻框
//该配置对象直接在option下布置
highlighter: {
lineWidthAdjust: 贰.五,
//当鼠标移动到推广的数据点上时,设置增大的数据点的大幅度
// 最近仅适用于非实心数据点
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 //
提醒音讯框中多少体现的格式是还是不是和该多少在坐标轴上海展览中心示格式1致
tooltipFormatString: ‘%.五P’ //
用于安装提示音讯框中数量展现的格式,前提条件是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: 贰, //设置阴影区域偏移出饼的每部分边框的离开
shadowDepth: 伍, // 设置阴影区域的吃水
shadowAlpha: 0.0七 // 安装阴影区域的光滑度
}
},
//pointLabels(数据点标签)
//用于在数据点所在地点呈现相关新闻(非提示框性质)
seriesDefaults: {
pointLabels: {
location:’s’,//数据标签展现在数据点相近的方向
ypadding:二 //数据标签距数据点在纵轴方向上的偏离
}
}
// Trendline(趋势线)
// 饼状图通过seriesDefaults和series配置对象进行陈设
seriesDefaults: {
trendline: {
show: true, // 是或不是出示趋势线
color: ‘#66666陆’, // 趋势线颜色
label: ”, // 趋势线名称
type: ‘linear’, //趋势线类型’linear’(直线), ‘exponential’(幂值数线)
or ‘exp’
shadow: true, // 同grid相同属性设置
lineWidth: 一.5, // 趋势线宽度
shadowAngle: 四伍, // 同grid相同属性设置
shadowOffset: 一.5, // 同grid相同属性设置
shadowDepth: 三, // 同grid相同属性设置
shadowAlpha: 0.07 // 同grid相同属性设置
}
}
}

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

此间给3个应用自定义参数的例子:

那边给三个施用自定义参数的例子:

 

复制代码 代码如下:

复制代码 代码如下:

  1. 当类目名称长度超过伍的时候
    博主就把他substring了  再拼接上”..”.

$.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′}]
});

$.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′}]
});

 

显示效果如下图所示:

来得效果如下图所示:

上边是源码:

4858美高梅 5

4858美高梅 6

 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                     };

源码下载
//www.jb51.net/jiaoben/35457.html
其官方网站:

源码下载
其官方网址:

 

您恐怕感兴趣的稿子:

  • jquery jqPlot API
    中文使用教程(万分强劲的图样工具)
  • jqPlot
    基于jquery的图腾插件
  • jqPlot Option配置对象详解
  • jqPlot
    jquery的页面图表绘制工具

jqplot是①款分外不错的依据jquery的图纸插件,那篇小说首要协理大家整理了jqplot的汉语使用表明和在线示例及源码下载。jqplot插件在支…

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

 

一言以蔽之使用三手续

 

  1. x轴上添加 trigger伊芙nt: true

    二.加盟那段代码隐藏过长的文字,长度可以协调定义

    axisLabel: {

                               formatter: function(value) {
                                  var res = value;
                                  if(res.length > 5) {
                                      res = res.substring(0, 4) + "..";
                                  }
                                  return res;
                              }
                          }
                      }
    
    1. 调用 extension(‘那里传出你的容器’);
      就足以采取了

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有