amcharts图表使用大全.docx
- 文档编号:7653349
- 上传时间:2023-01-25
- 格式:DOCX
- 页数:22
- 大小:44.29KB
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
minorGridEnabled
Specifiesifminorgridshouldbedisplayed.
true,false
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">
2、引用amchartsjs库和css样式
3、设定一个定时器,循环调用函数
window.setInterval(show,2000);//每隔2秒调用一次show()方法,show方法完成绘图功能
functionshow(){
varchart=newAmCharts.AmSerialChart();
varvalueAxis1=newAmCharts.ValueAxis();
vargraph1=newAmCharts.AmGraph();
varcategoryAxis=chart.categoryAxis;
varguide=newAmCharts.Guide();
varlegend=newAmCharts.AmLegend();
varchartCursor=newAmCharts.ChartCursor();
//设定最大显示数值个数
generateChartData();
chart.pathToImages="amcharts/images/";
chart.zoomOutButton={
backgroundColor:
'#000000',
backgroundAlpha:
0.15
};
chart.dataProvider=chartData;
chart.categoryField="date";
categoryAxis.parseDates=false;//asourdataisdate-based,wesetparseDatestotrue
categoryAxis.dashLength=1;
categoryAxis.gridAlpha=0.15;
categoryAxis.axisColor="#DADADA";
//categoryAxis.position="top";
categoryAxis.gridPosition="start";
categoryAxis.startOnAxis=true;
categoryAxis.gridColor="#FFFFFF";
//CURSOR
chartCursor.zoomable=false;//asthechartdisplayesnottoomanyvalues,wedisabledzooming
chartCursor.cursorAlpha=0;
chartCursor.cursorPosition="mouse";
chartCursor.pan=true;//setittofalsifyouwantt
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- amcharts 图表 使用 大全
![提示](https://static.bdocx.com/images/bang_tan.gif)