amcharts图表使用总结.docx

amcharts图表使用总结.docx

《amcharts图表使用总结.docx》由会员分享，可在线阅读，更多相关《amcharts图表使用总结.docx（22页珍藏版）》请在冰豆网上搜索。

amcharts图表使用总结

北京市博汇科技有限公司

AmchartsJS版属性/方法详细说明书

2013.09.09

修改记录

序号

日期

作者

修改记录

评审

1

2013-09-09

王震阳

创建

1、坐标轴（Y轴）

序号

属性名/方法名

作用

对象获取方法/常用属性值

示例

1

valueAxis对象

图表的Y轴，一个图表中可以有多个Y轴

VarvalueAxis=newAmCharts.ValueAxis（）;

2

axisColor

轴的颜色

valueAxis.axisColor="#FF6600";

3

axisThickness

轴的宽度

valueAxis.axisThickness=1;

4

gridAlpha

轴的透明度，值介于0-1之间，0全透明

valueAxis1.gridAlpha=0.2;

5

tickLength

轴从下到上像左或右伸出来的延长线

valueAxis1.tickLength=0;

6

minimum

轴的最小值，如果不设置那么最小值根据数据动态变化

valueAxis1.minimum=-100;

7

maximum

轴的最大值，如果不设置那么最大值根据数据动态变化

valueAxis1.maximum=100;

8

title

轴的名称

valueAxis1.title="哈哈";

9

logarithmic

是否为对数函数分布，一般轴的刻度是均匀划分的，当该属性设置为true的时候，刻度分布呈对数形式分布

valueAxis1.logarithmic=false;

10

integersOnly

是否只显示整数，如果为true轴的刻度只显示整数形式

valueAxis1.integersOnly=true;

11

gridCount

最大刻度个数

valueAxis1.gridCount=10;

12

unit

单位

valueAxis1.unit="%";

13

labelsEnabled

是否显示轴标签，默认值为true

valueAxis1.labelsEnabled=true;

14

inside

轴的刻度值显示在表里面还是外面

valueAxis1.inside=true;

15

position

轴的位置，默认在左侧

valueAxis1.position="left";

16

stackType

valueAxis.stackType="0%";

2、categoryAxis（图表线，相当于X轴）

序号

属性名/方法名

作用

对象获取方法/常用属性值

示例

1

valueAxis对象

图表的线，一个图表中可以有多个，每个对应一个Y轴或者共同拥有一个Y轴

varcategoryAxis=chart.categoryAxis;

2

parseDates

是否以日期为x轴的值

True、false

categoryAxis.parseDates=false;

3

minPeriod

当以日期为x轴的时候x轴显示的最小范围

SS：

分钟DD：

天

categoryAxis.minPeriod="SS"

4

dashLength

破折线长度，默认为0是实心线

categoryAxis.dashLength=1;

5

gridAlpha

网格的透明度，垂直x轴的刻度线形成网格

categoryAxis.gridAlpha=0.15;

6

axisColor

轴的颜色

categoryAxis.axisColor="#DADADA";

7

position

轴的位置，默认在最下方

top：

显示在上方left:

左侧right：

右侧

categoryAxis.position="top";

8

gridPosition

网格位置

categoryAxis.gridPosition="start";

9

startOnAxis

是否从轴上开始绘制，默认为false，即第一个点绘制是从中间开始的，当设置为true的时候，第一个点开始总是从Y轴上开始，结束总是在最后一个跟Y轴平行的轴上结束

true、false

categoryAxis.startOnAxis=true;

10

gridColor

网格颜色

categoryAxis.gridColor="#FFFFFF";

11

dateFormats

日期格式，将数据格式化成对应的日期格式

categoryAxis.dateFormats=[{period:

'DD',format:

'DD'},

{period:

'WW',format:

'MMMDD'},

{period:

'MM',format:

'MMM'},period:

'YYYY',

format:

'YYYY'

}];

12

3、Legend（图例）

序号

属性名/方法名

作用

对象获取方法/常用属性值

示例

1

legend对象

在图表的上方或者下方显示图例，图例的颜色就是对应线条的颜色

varlegend=newAmCharts.AmLegend（）;

2

align

排列样式

center

legend.align="center";

3

marginLeft

左边缘

legend.marginLeft=0;

4

title

标题

legend.title="测试";

5

horizontalGap

水平间隔，一个图表可以有多个图例，图例之间的间隔用此属性

legend.horizontalGap=10;

6

equalWidths

是否等宽

legend.equalWidths=false;

7

valueWidth

值的宽度，在图例的右侧会显示该线或者图表的当前选中的值，设置为0时则不显示值

legend.valueWidth=120;

8

switchType

暂时没明白什么意思

legend.switchType="v";

4、Guide（向导线）

序号

属性名/方法名

作用

对象获取方法/常用属性值

示例

1

guide对象

向导线可以是一条根Y轴平行的线，也可以是一个矩形区域

varguide=newAmCharts.Guide（）;

2

fillAlpha

区域透明度

guide.fillAlpha=0.1;

3

lineAlpha

线透明度

guide.lineAlpha=0;

4

value

其实值，其实指对应Y坐标的值

guide.value=50;

5

toValue

到达值，其实指对应Y坐标的值，跟上面属性共同确定了一个从value到toValue的区域，宽度为图表的宽度，高度为（toValue-value）的绝对值

guide.toValue=0;

6

lineColor

相导线的颜色

guide.lineColor="#CC0000";

7

dashLength

破折长度，默认为0为实心线条，设置值后为破折线

guide.dashLength=4;

8

label

标签，就是给向导线显示一个名字

guide.label="平均值";

9

inside

是否让向导线显示在图形里面，默认为true

True，false

guide.inside=true;

5、Scrollbar（滚动条）

序号

属性名/方法名

作用

对象获取方法/常用属性值

示例

1

scrollbar对象

滚动条可以选择图表显示的区域

varchartScrollbar=newAmCharts.ChartScrollbar（）;

3

backgroundAlpha

滚动条背景透明度

chartScrollbar.backgroundAlpha=0.1;

4

backgroundColor

滚动条背景颜色

chartScrollbar.backgroundColor="#000000";

5

graphLineAlpha

图像线条的透明度

chartScrollbar.graphLineAlpha=0.1;

6

graphFillAlpha

图像的填充透明度

chartScrollbar.graphFillAlpha=0;

7

selectedGraphFillAlpha

选中图像的填充色的透明度

chartScrollbar.selectedGraphFillAlpha=0;

8

selectedGraphLineAlpha

选中区域的图像线条透明度

chartScrollbar.selectedGraphLineAlpha=0.25;

9

scrollbarHeight

滚动条高度

chartScrollbar.scrollbarHeight=30;

10

selectedBackgroundColor

选中区域的背景颜色

chartScrollbar.selectedBackgroundColor="#FFFFFF";

6、Graph（图表）

序号

属性名/方法名

作用

对象获取方法/常用属性值

示例

1

graph对象

图像对象，必须有该属性

vargraph1=newAmCharts.AmGraph（）;

2

valueAxis

图像的Y轴，一个chart可以添加多个graph，一个graph只能有一个valueAxis

graph1.valueAxis=valueAxis1;

3

valueField

指定一个字段作为Y坐标值

graph1.valueField="visits";

4

bullet

图像的节点类型

graph1.bullet="round";

5

dashLength

绘制图像时延时，默认为0秒，设置为正整数时可以看到动态生成效果

graph1.dashLength=0;

6

hideBulletsCount

一个图像中当节点大于一定数值后隐藏节点形状

graph1.hideBulletsCount=10;

7

balloonText

节点显示的文本内容

graph1.balloonText="[[date]]（[[visits]]）";

8

lineColor

图像线颜色

graph1.lineColor="#d1655d";

9

connect

是否连接起来，是指如果数据有x轴值，但是y轴值丢失的时候，如果设置为true则忽略该点，设置为false则线条在此点处断开

graph1.connect=false;

10

bulletBorderColor

节点边框颜色

graph1.bulletBorderColor="#FFFFFF";

11

bulletBorderThickness

节点边框宽度

graph1.bulletBorderThickness=2;

12

customBulletField

用户自定义节点字段

graph.customBulletField="bullet";

13

bulletOffset

节点偏移量

graph.bulletOffset=16;

14

cornerRadiusTop

graph.cornerRadiusTop=8;

15

bulletSize

节点大小

graph.bulletSize=14;

16

colorField

颜色字段，颜色可以从数据中读取

graph1.colorField="color";

17

type

图像类型，有line、column、smoothedLine类型，第一种为线形图，第二种为柱状图

line/column/smoothedLine

graph1.type="line";

18

fillAlphas

填充区透明度，默认为0，最大值为1，当设置值时，在线条跟x轴之间的区域会填充颜色

graph1.fillAlphas=0.3;

19

negativeLineColor

当数值为负数时线条的颜色

graph1.negativeLineColor="#efcc26";

7、Chart（amcharts对象）

序号

属性名/方法名

作用

对象获取方法/常用属性值

示例

1

chart对象

Amcharts的核心对象

varchart=newAmCharts.AmSerialChart（）;

2

pathToImages

指定chart图片的引用地址

chart.pathToImages="amcharts/images/";

3

zoomOutButton

设置放大/缩小按钮的背景色和透明度

chart.zoomOutButton={

backgroundColor:

'#000000',

backgroundAlpha:

0.15

};

4

dataProvider

指定数据来源，一般指向一个数组对象

chart.dataProvider=chartData;

5

categoryField

指定X轴由哪个字段决定

chart.categoryField="date";

6

autoMargins

自动调整边距，如果设置为true则边距设置不起效

chart.autoMargins=true;

7

fontSize

字体大小

chart.fontSize=14;

8

color

图标颜色

chart.color="#FFFFFF";

9

marginTop

上边距

chart.marginTop=100;

10

marginLeft

左边距

chart.marginLeft=50;

11

marginRight

右边距

chart.marginRight=30;

12

addGraph（graph）

添加一个图形，可以添加多个，想要绘制图形，必须有此方法

chart.addGraph（graph1）;

13

validateNow（div）

当数据改变时或者属性改变时，想要重新绘图，可以调用该方法

chart.validateNow（'chartdiv'）;

14

chart.write（'chartdiv'）;

将amcharts对象写到一个div中，最常用方法

chart.chart.write（'chartdiv'）;;

15

addListener（'dataUpdated',zoomChart）

添加一个监听函数，第一个参数是指定事件，第二个是调用的函数名

chart.addListener（'zoomed',handleZoom）;

chart.addListener（'dataUpdated',zoomChart）;

16

rotate

图像是否xy轴互换，默认为false，如果想让图像顺时针旋转90°，则设置为true

False，true

chart.rotate=false;

17

depth3D

设置为3d图像的厚度值

chart.depth3D=50

18

angle

角度，当设置图像为3d图时使用该属性，默认为0

chart.angle=40

19

startDuration

chart.startDuration=2

20

plotAreaBorderColor

绘图区域边框颜色

chart.plotAreaBorderColor="#000000";

21

plotAreaBorderAlpha

绘图区域边框透明度

chart.plotAreaBorderAlpha=5;

22

backgroundImage

设置背景图片的地址

chart.backgroundImage="amcharts/images/bg.jpg";

23

addChartScrollbar（chartScrollbar）

添加滚动条，只能添加一个

chart.addChartScrollbar（chartScrollbar）;

24

addLegend（legend）

添加图例，可以添加多个

chart.addLegend（legend）;

25

addValueAxis（valueAxis1）

添加Y轴。

可以添加多个

chart.addValueAxis（valueAxis1）;

26

addChartCursor（chartCursor）

添加鼠标形状

chart.addChartCursor（chartCursor）;

27

28

29

30

31

32

8、ChartCursor（光标）

序号

属性名/方法名

作用

对象获取方法/常用属性值

示例

1

chartCursor对象

设置光标的形状和样式

varchartCursor=newAmCharts.ChartCursor（）;

2

zoomable

是否可以缩放，设为true的时候，按住鼠标左键划线可以方法图像

True/false

chartCursor.zoomable=false;

3

cursorAlpha

光标透明度

chartCursor.cursorAlpha=0;

4

cursorPosition

光标位置

chartCursor.cursorPosition="mouse";

5

pan

默认为false，设置为true时，光标变为四个向外的箭头形状，按住左键滑动鼠标可以将图像向左移动向右移动

chartCursor.pan=true;

6

categoryBalloonDateFormat

设置光标节点显示的日期格式

chartCursor.categoryBalloonDateFormat="JJ:

NN,DDMMMM";

9、动态图表示例

1、需要在html页面增加一个div，同时设置div的id和样式，amcharts将图表显示在指定的id的div中

50%;height:

300px">