Canvas 动画之支付宝价格拖动选择

2018/02/27 · JavaScript
· Canvas

初稿出处：
本人照旧在那边   

效用源码

毕竟到年最终，再过两日我也要回家过年了，想想就感动吧！后天给我们带来一个基于移动端的canvas价格接纳效果。

第一职能就是拖动标尺变动价格。而且支付宝和京东经济的里也有那样的机能（果然天下设计都是你抄我自身抄你啊）。

效益演示地址

Highcharts翻译连串之十七：xAxis x轴的样式（一）
xAxis x轴样式概览

简介

简介

1.完结思路

漫天职能的为主就是用canvas绘制的标尺。一共包蕴标尺主体，数字，和高中级固定不变的标定轴，那多少个部分都用canvas绘制。最下边的小号价格文字，因为其余地点会要求用它来测算有关的纯收入。所以，我们就用个DOM来表现，那样比较便宜获取。

标尺拖动的偏离与价格中间有有一个映射关系，是一切成效最不好处理的一些，在实际处理到有关难点的时候我们再做分析。现在，我们先完毕基础的标尺绘制。

 

jqplot是一款尤其科学的按照jquery的图形插件，那篇小说主要援救大家整理了jqplot的国语使用验证和在线示例及源码下载。jqplot插件在支撑HTML5的浏览器上校会在canvas上突显图表。

jqplot是一款尤其科学的依照jquery的图样插件，那篇文章主要扶助我们整理了jqplot的汉语使用表达和在线示例及源码下载。jqplot插件在援救HTML5的浏览器准将会在canvas上显现图表。

2.标尺属性定义

我们先定义一个类叫Rule.js, 其具体性质如下。

现今大家来打探一下各类属性的意思：

1. x, y: 标尺的坐标地点
2. vx: 标尺的移位速度
3. ax: 标尺移动加速度
4. color: 绘制标尺线条的水彩，与文字颜色
5. scaleX, scaleY: 缩放比
6. markShort, markLong: 标尺长短线的尺寸
7. textHeight: 文字距离标尺主体的可观
8. min, max: 要显示的最大值和最小值
9. width: 标尺的像素宽度
10. step: 步长
11. seg: 段数
12. pxStep: 在canvas上的实际上拉长率(单位为px)
13. minPxStep: 每个pxStep分10小段，每小段的其实像素宽度
14. lineBottom: 尾部横线参数
15. lineRed: 标定轴参数

参数相比较多，但确实必要传入的参数其实并不是无数。那里自己教学一下（8）【亚洲必赢官网】图形中文API使用文档及源码和在线示例，动画之支付宝价格拖动选取。~（15）那多少个参数的思路。

min， max :
参数的法力是安装须要出示的最大金额和纤维金额。那八个参数是表面传入的，比如设定用户最小能存100元，最大能存100000万元。那么min和max就分别对应100和100000。

width :
是全体标尺的实际上显示器尺寸，比如你只想标尺绘制1000px,那那里就传1000就好了。

step :
步长的意思就是每隔多少分一段，比如大家设定的最大金额为10000元，
那设置step为1000就意味着，每隔1000元表示一个小段，那也是canvas上标尺刻度必要绘制的数据。

seg : 段数等于总金额max除以step。

pxStep : 为实在映射到canvas上的像素步长。

miniPxStep : 每个pxStep分为10小段，每小段的像素距离。

lineBottom :
独立出来不和标尺刻度一起绘制，在绘制标尺的底部横线时，我是这么想的。底部横线的宽度其实就是canvas的宽度，没必要从标尺的先河画到标尺的尾声。而且为了用户体验，刻度的伊始地点和完工地方都放在整个canvas的着力。所以，若是合在一起绘制，你须要先绘制一段没刻度的横线，然后再绘制刻度，到结尾还要绘制一段没刻度的横线。那给无疑让绘制和三番两回的标尺移动变得一定困苦。所以我把它抽出来，就是一条贯穿canvas的平常横线。

lineRed :
标定轴，始终在canvas的中游，也单身出来不和标尺刻度一起绘制。

属性都有了，下边添加一个draw方法，把大家的标尺绘制出来。

参数
 描述
 默认值
 
allowDecimals
 轴上的刻度是还是不是允许行使小数。
 true
 
alternateGridColor
 当使用备用的网格颜色时，表格会各行变色
 null
 
categories
 x轴的称呼。比如  categories: [‘Apples’, ‘Bananas’, ‘Oranges’]
 []
 
dateTimeLabelFormats
 时间轴，标尺会依照合适的单位活动测算。
 {second:’%H:%M:%S’,

引入脚本文件

引入脚本文件

2.标尺绘制

a) 绘制标尺刻度部分

此间有个截图错误，应该是i+=this.miniPxStep。那应该简单了解，就是每隔miniPxStep制图三遍线段，线段的连串根据n以此变量来确定。

b) 绘制标尺文字部分

文字的绘图无法以诚实的屏幕像素为准，必须映射到金额上，所以，那里绘制的数字是（n/10）* this.step。同时，还做了一个格外的处理，就是开端值是1，不是0。因为，大家的金额不允许输入0元。若是您不需要以此，把那里注释掉就ok了。

c) 绘制底部横线

d) 绘制标定轴

诸如此类任何标尺就成功了，rule.js文件在顶部的github中。现在咱们调用一下以此文件，看看画出来的意义如何。

那边大家设置了最大额度为100000元，最小额度为500元。整个标尺的尺寸为5000px，步长step为1000元。效果图如下：

让标尺偏移个200px, 比如设置: x: ruleX - 200, 效果如下：

安装步长step为500,效果如下：

ok，现在静态标尺就绘制落成，下一步就要完成交互成效，让标尺可以跟随鼠标滚动，并且展现当前拖动的金额。

minute:’%H:%M’,

jqplot要求1.4.3以上的jquery版本支持，刚才说过了，jqplot在支撑HTML5
Canvas的浏览器大校以canvas显示，否则，如若你在IE9以下版本的浏览器上则要引入excanvas.js文件，当然，jqplot的CSS文件也要同时引入，代码如下：

jqplot须要1.4.3以上的jquery版本扶助，刚才说过了，jqplot在协理HTML5
Canvas的浏览器中将以canvas突显，否则，假诺你在IE9以下版本的浏览器上则要引入excanvas.js文件，当然，jqplot的CSS文件也要同时引入，代码如下：

3.拖动标尺

前天我们开头达成标尺的拖动。标尺的拖动原理很简短，就是让标尺的任务跟随鼠标移动。那里为了演示方便自己换成了鼠标事件，到移动端换成touch事件即可。

先是引入大家的工具函数utils.js文本，然后定义多少个变量。

isMouseDown用来判断鼠标是或不是抬起，
oldX用来记录上一回拖动的岗位，mouse是使用captureMouse归来的指标，再次来到鼠标在canvas上的眼前岗位音讯。

接下来，监听canvas的鼠标事件mousedown, mouseup, mousemove。并改变rule的位置。

当鼠标按下时，isMouseDown变为true,
offsetX在上头忘记写了，它的功能是记录鼠标按下的职位与标尺地点之间的偏移量。然后在鼠标移动时标尺的岗位rule.x = mouse.x - offsetX。固然不这么做，在点击canvas并拖动标尺的立刻，你会意识标尺的开头地点会瞬移到鼠标点击地点，那样感受很不好，大家须要不管点击哪，标尺都会在现有的职位跟随鼠标移动。借使，不能体会，出手试一试去掉回事什么效能。

oldX也很好明白，就是记录标尺上一回的岗位，这里还一直不选取它，后边可能会用到。
方今大家把标尺的绘图写进动画函数中

探访动画效果怎样。

ok，现在我们曾经完毕了标尺跟随鼠标的拖动。下一步，大家就把拖动的金额呈现出来。

hour:’%H:%M’,

复制代码 代码如下:

复制代码 代码如下:

4.金额显示

第一，扩充一个input输入框，然后拿走它。

 

此间安装了输入框的最小值为标尺的很小额度，那里可以先不用管它。大家首要看onMouseMove函数

注意money的总括值，它为(centerX - rule.x)*rule.ratioScale。
(centerX - rule.x)比较好掌握，因为，大家的标尺是从canvas的主题点绘制的。但rule.ratioScale在最开首的构造函数中并没有定义。那里需求在构造函数中足够，它的意思是每像素代表有点钱，可以认为是图形比例尺。

this.ratioScale = Math.floor(this.max / this.width) //比列尺

1	this.ratioScale = Math.floor(this.max / this.width) //比列尺

那么自然，移动距离乘以比例尺就得出钱数了。大家看看效果。

小心到地点的效应中金额显示出现了负数，所以大家需求对运动范围做限定。让其只得在界定的最大和微小金额之间活动。

day:’%e. %b’,

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

5.运动范围界定

对一定限制的范围紧要分为两片段。一、标尺范围的界定。二、金额呈现的限制。那两有些我们身处一块儿做。

1）重设标尺的起来地点
假如大家设置的微乎其微金额为500元，那么起初标定轴的岗位应该就是500元的职责。所以开始化标尺的职位后，大家给它重置为最小金额的地点。那时候须求把金额换算一下。

rule.x = centerX – rule.min / rule.ratioScale;

1	rule.x = centerX – rule.min / rule.ratioScale;

哪怕把金额值得计算倒一下。

2）限定标尺的活动范围

 

那边定义了一个检测边界值得函数，当金额小于最小投资金额时，标尺的地方为初始地点start(注意那些开首地点是一度被重置过的),
并且设置金额为最小额度。最大义务同理。
然后，在onMouseMove中调用。

探访效果图。

 

week:’%e. %b’,

拉长一个plot容器

足够一个plot容器

6.输入金额移动标尺

标尺的运动除了拖动以外，大家也意在因而金额输入框来达到。即输入金额，标尺便移动到对象金额的职位。

 

还要大家也做了界线限制，当输入的金额小于或者高于设定值时会，设置标尺的岗位和输入框的来得为边界值，看看效果。

month:’%b \’%y’,

大家得以在页面上为jqplot添加一个器皿，比如div，但要注意的是，要为那些div容器指定宽度好中度，如下代码：

咱俩得以在页面上为jqplot添加一个器皿，比如div，但要注意的是，要为那几个div容器指定宽度好中度，如下代码：

7.来个速度吗

近年来拖动的还相比不自然，我们想要手指离开后标尺还会继续移动，直到速度渐渐减为0。为此，新建多个变量。

var speed = 0, fl = 0.95; //开始速度， 摩擦周到

1	var speed = 0, fl = 0.95; //初始速度， 摩擦系数

新建一个move函数，在动画循环中调用。

 

迄今为止，拖动输入的为主职能就支付完了。如果你要在类型中应用，另一个索要留意的工作是canvas在活动端的模糊难点，那一个早已有了过多的解决方案，你只需求耐心调试就好。最终仍然祝大家新年欢乐，源码在头顶地址哦。

1 赞 收藏
评论

year:’%Y’}
 
endOnTick
 是不是强制轴以一个刻度为止。使用该项和maxPadding想来控制轴的末尾。
 false
 
events
 参照events
 
 
gridLineColor
 绘图区网格线的水彩
 #C0C0C0
 
gridLineDashStyle
 网格线的点或线的样式
 Solid
 
gridLineWidth
 绘图区网格线的小幅
 0.0
 
id
 轴的id。可以在图纸渲染后，通过chart.get()得到一个点
 null
 
labels
 参照labels
 
 
lineColor
 轴本身的线的水彩。
 #C0D0E0
 
lineWidth
 轴本身的线的增幅。
 1.0
 
linkedTo
 指向本轴的另一个轴的目录。当一个轴指向主轴时，它将有和主轴一样的极其值，但是通过min，max或setExtremes可以变动。它也得以用来突显附加的新闻，或者经过复制标尺来解决图表显示。
 null
 
max
 轴的最大值。即使是null，最大值被活动测算。即使endOnTick选项是true，max的值可能会被四舍五入。实际的最大值也会被chart.alignTicks影响。
 null
 
maxPadding
 最大值相对于轴的尺寸的填写间距。padding值为0.05时会取100px长的轴的5px长度。
 0.01
 
maxZoom
 已过期。V2.2版本后改名为minRange.
 null
 
min
 轴的微小值。要是是null，最小值会被活动测算。
 null
 
minPadding
 最小值相对于轴的长短的填写间距。假若padding的值为0.05将会取一个长为100px轴的5px值。
 0.01
 
minRange
 轴突显的很小范围。整个轴将不被允许领先那么些小小的间隔。比如一个时间轴，首要单位是阿秒。
 null
 
minTickInterval
 轴值允许的矮小刻度间隔。比如缩放轴用来显示每一天的多少，可以用来堵住轴上突显小时的年华。
 null
 
minorGridLineColor
 最小级别，次级的网格线的水彩。
 #E0E0E0
 
minorGridLineDashStyle
 次级网格线的破折号或点的样式。
 Solid
 
minorGridLineWidth
 次级网格线的肥瘦。
 1.0
 
minorTickColor
 次级刻度标记的水彩。
 #A0A0A0
 
minorTickInterval
 次级网格线的刻度间隔，以标尺为单位。在线性轴中，若是是‘auto’，次级刻度间隔是刻度间隔的五分之一。假诺是null，次级刻度将不出示。
 null
 
minorTickLength
 次级刻度的像素长度
 2.0
 
minorTickPosition
 次级刻度相对于轴线的地方。可以是inside或outside。
 outside
 
minorTickWidth
 次级刻度的像素宽度
 0.0
 
offset
 绘图区到轴线的像素距离。正的偏移量会让轴的线、便签和刻度远离绘图区。
 0.0
 
opposite
 是或不是出示在正常呈现的对门一侧呈现轴。正常展现是笔直的左边，水平的上面，因而对面就是垂直的右手和档次的顶端。
 false
 
plotBands
 参照 plotBands
 
 
plotLines
 参照 plotLines
 
 
reversed
 是不是翻盘轴以使得最高的点最接近起源。
 false
 
showEmpty
 是或不是出示轴线和标题，当轴不包罗数据时
 null
 
showFirstLabel
 是不是出示第四个刻度标签
 true
 
showLastLabel
 是或不是出示最后一个刻度标签
 false
 
startOfWeek
 对于时间轴，决定轴之间的刻度。0=周五，1=周二。
 1.0
 
startOnTick
 是不是强制轴以刻度开首。结合maxPadding选项应用控制轴的开端。
 false
 
tickColor
 主刻度的水彩。
 #C0D0E0
 
tickInterval
 住刻度的距离，以轴单位为单位。当为null时，线性轴的刻度间隔相当于tickPixelInterval，时间轴的约为时间距离。
 null
 
tickLength
 主刻度的长度。
 5.0
 
tickPixelInterval
 当tickInterval是null的时候，该选拔设置了刻度标志的大约间隔的像素值。
 Y轴:72，X轴:100.
 
tickPosition
 刻度标记相对于轴线的岗位。可以是inside或outside。
 outside
 
tickPositioner
 回调函数，再次回到一个概念刻度在轴上的排列的数组。
 null
 
tickPositions
 定义轴刻度的数组。
 null
 
tickWidth
 主刻度的像素宽度。
 1.0
 
tickmarkPlacement
 仅用在分类轴上。如若是on，刻度标记在分拣的正中间，如若是between，刻度在八个分类的之间。
 between
 
title
 参照title
 
 
type
 轴的项目。可以是linear，logarithmic，或者datetime。
 linear
 

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

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

 

开班成立plot图表

始发创办plot图表

event ‘x轴’事件

接下去大家在上边创设好的器皿中通过调用$.jqplot完结图表的成形和渲染，比如若是用上边的数目来初步化jqplot图表：

接下去大家在上边创制好的器皿中通过调用$.jqplot已毕图表的变通和渲染，比如即使用上面的数目来开头化jqplot图表：

 

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

参数
 描述
 默认值
 
afterSetExtremes
 相对于setExtremes事件的风浪。在结尾的最小值和最大值都被总结且考订过minRange后触发该事件
 null
 
setExtremes
 当轴的最大值和最小值设置的时候，被触发，无论是调用.setExtremes()方法依旧是选项了图片的一个区域。this关键字是指轴对象自己。唯一的参数event被传送到函数中。用户设置的新的最大值和最小值可以经过event.min和event.max查找。
 null
 

说到底突显效果如下图所示：

jqplot属性选项
大家在调用$.jqplot时可以流传一些参数options来自定义jqplot，部分参数options如下：

终极突显效果如下图所示：

jqplot属性选项
我们在调用$.jqplot时方可流传一些参数options来自定义jqplot，部分参数options如下：

 

复制代码 代码如下:

复制代码 代码如下:

lables ‘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’。
show马克: 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, //是不是出示刻度线以及坐标轴上的刻度值,
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: 2.5, // 分类图（更加是折线图）哪宽度.
shadow: true, // 各图在图纸中是还是不是出示阴影区域.
shadowAngle: 45, //参考grid中一致参数.
shadowOffset: 1.25, //参考grid中相同参数.
shadowDepth: 3, //参考grid中一样参数.
shadowAlpha: 0.1, // Opacity of the shadow.
showLine: true, //是不是出示图表中的折线（折线图中的折线）
show马克er: 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相同属性设置
}
}
}

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’。
show马克: 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相同属性设置
}
}
}

 

那里给一个选拔自定义参数的事例：

此间给一个运用自定义参数的事例：

参数
 描述
 默认值
 
align
 水平对齐格局。可以是’left’,’right’,’center’.
 center
 
enabled
 启用或禁用轴标签
 true
 
formatter
 回调javascript函数格式化标签。值通过this.value得到。this的增大属性，axis，chart，isFirst和isLast。
 function() {

复制代码 代码如下:

复制代码 代码如下:

return this.value;}

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

 
 
overflow
 要是处理水平轴的溢出标签。可以是undefined和‘justify’。倘诺是justify，标签将不会在绘图区外渲染。若是有丰盛的长空去运动它，它将会在边缘对齐，否则会被移除。

来得效果如下图所示：

突显效果如下图所示：

 
 null
 
rotation
 标签旋转的角度
 0
 
staggerLines
 仅在档次轴使用。把标签分布在几行中以增大或裁减标签的半空中。
 null
 
step
 每隔n个的标签突显在轴上。设置step为n。设置step为2，每隔1个突显标签。
 null
 
style
 标签的CSS样式
 style: {

color:’#6D869F’,

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

源码下载
其官方网站：

fontWeight:  ‘bold’

你或许感兴趣的小说:

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

jqplot是一款越发不利的依据jquery的图样插件，那篇小说主要扶助大家整理了jqplot的中文使用表明和在线示例及源码下载。jqplot插件在支…

}
 
useHTML
 是还是不是拔取HTML渲染标签
 false
 
x
 标签相对于轴刻度的地点的x的偏移量
 0
 
y
 标签相对于轴刻度的职分的y的偏移量。
 0
 

 

plotBands 情节带 和plotLines情节线 及title标题，参照下篇博客 x轴样式二。

 

 

 

 

x轴的体裁（一）
xAxis x轴样式概览 参数 描述 默许值 allowDecimals
轴上的刻度是不是允许行使小数。 true alternat…