amcharts图表使用大全要点Word格式.docx
《amcharts图表使用大全要点Word格式.docx》由会员分享，可在线阅读，更多相关《amcharts图表使用大全要点Word格式.docx（22页珍藏版）》请在冰点文库上搜索。
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轴）
图表的线，一个图表中可以有多个，每个对应一个Y轴或者共同拥有一个Y轴
varcategoryAxis=chart.categoryAxis;
parseDates
是否以日期为x轴的值
True、false
categoryAxis.parseDates=false;
minPeriod
当以日期为x轴的时候x轴显示的最小范围
SS：
分钟DD：
天
categoryAxis.minPeriod="
SS"
dashLength
破折线长度，默认为0是实心线
categoryAxis.dashLength=1;
网格的透明度，垂直x轴的刻度线形成网格
categoryAxis.gridAlpha=0.15;
axisColor
categoryAxis.axisColor="
#DADADA"
轴的位置，默认在最下方
top：
显示在上方left:
左侧right：
右侧
categoryAxis.position="
top"
gridPosition
网格位置
categoryAxis.gridPosition="
start"
startOnAxis
是否从轴上开始绘制，默认为false，即第一个点绘制是从中间开始的，当设置为true的时候，第一个点开始总是从Y轴上开始，结束总是在最后一个跟Y轴平行的轴上结束
true、false
categoryAxis.startOnAxis=true;
gridColor
网格颜色
categoryAxis.gridColor="
#FFFFFF"
dateFormats
日期格式，将数据格式化成对应的日期格式
categoryAxis.dateFormats=[{period:
'
DD'
format:
'
},
{period:
WW'
MMMDD'
MM'
format:
MMM'
},period:
YYYY'
format:
}];
minorGridEnabled
Specifiesifminorgridshouldbedisplayed.
true,false
3、Legend（图例）
legend对象
在图表的上方或者下方显示图例，图例的颜色就是对应线条的颜色
varlegend=newAmCharts.AmLegend（）;
align
排列样式
center
legend.align="
center"
marginLeft
左边缘
legend.marginLeft=0;
标题
legend.title="
测试"
horizontalGap
水平间隔，一个图表可以有多个图例，图例之间的间隔用此属性
legend.horizontalGap=10;
equalWidths
是否等宽
legend.equalWidths=false;
valueWidth
值的宽度，在图例的右侧会显示该线或者图表的当前选中的值，设置为0时则不显示值
legend.valueWidth=120;
switchType
暂时没明白什么意思
legend.switchType="
v"
4、Guide（向导线）
guide对象
向导线可以是一条根Y轴平行的线，也可以是一个矩形区域
varguide=newAmCharts.Guide（）;
fillAlpha
区域透明度
guide.fillAlpha=0.1;
lineAlpha
线透明度
guide.lineAlpha=0;
value
其实值，其实指对应Y坐标的值
guide.value=50;
toValue
到达值，其实指对应Y坐标的值，跟上面属性共同确定了一个从value到toValue的区域，宽度为图表的宽度，高度为（toValue-value）的绝对值
guide.toValue=0;
lineColor
相导线的颜色
guide.lineColor="
#CC0000"
破折长度，默认为0为实心线条，设置值后为破折线
guide.dashLength=4;
label
标签，就是给向导线显示一个名字
guide.label="
平均值"
是否让向导线显示在图形里面，默认为true
True，false
guide.inside=true;
5、Scrollbar（滚动条）
scrollbar对象
滚动条可以选择图表显示的区域
varchartScrollbar=newAmCharts.ChartScrollbar（）;
backgroundAlpha
滚动条背景透明度
chartScrollbar.backgroundAlpha=0.1;
backgroundColor
滚动条背景颜色
chartScrollbar.backgroundColor="
#000000"
graphLineAlpha
图像线条的透明度
chartScrollbar.graphLineAlpha=0.1;
graphFillAlpha
图像的填充透明度
chartScrollbar.graphFillAlpha=0;
selectedGraphFillAlpha
选中图像的填充色的透明度
chartScrollbar.selectedGraphFillAlpha=0;
selectedGraphLineAlpha
选中区域的图像线条透明度
chartScrollbar.selectedGraphLineAlpha=0.25;
scrollbarHeight
滚动条高度
chartScrollbar.scrollbarHeight=30;
selectedBackgroundColor
选中区域的背景颜色
chartScrollbar.selectedBackgroundColor="
6、Graph（图表）
graph对象
图像对象，必须有该属性
vargraph1=newAmCharts.AmGraph（）;
valueAxis
图像的Y轴，一个chart可以添加多个graph，一个graph只能有一个valueAxis
graph1.valueAxis=valueAxis1;
valueField
指定一个字段作为Y坐标值
graph1.valueField="
visits"
bullet
图像的节点类型
graph1.bullet="
round"
绘制图像时延时，默认为0秒，设置为正整数时可以看到动态生成效果
graph1.dashLength=0;
hideBulletsCount
一个图像中当节点大于一定数值后隐藏节点形状
graph1.hideBulletsCount=10;
balloonText
节点显示的文本内容
graph1.balloonText="
[[date]]（[[visits]]）"
图像线颜色
graph1.lineColor="
#d1655d"
connect
是否连接起来，是指如果数据有x轴值，但是y轴值丢失的时候，如果设置为true则忽略该点，设置为false则线条在此点处断开
graph1.connect=false;
bulletBorderColor
节点边框颜色
graph1.bulletBorderColor="
bulletBorderThickness
节点边框宽度
graph1.bulletBorderThickness=2;
customBulletField
用户自定义节点字段
graph.customBulletField="
bullet"
bulletOffset
节点偏移量
graph.bulletOffset=16;
cornerRadiusTop
graph.cornerRadiusTop=8;
bulletSize
节点大小
graph.bulletSize=14;
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对象）
chart对象
Amcharts的核心对象
varchart=newAmCharts.AmSerialChart（）;
pathToImages
指定chart图片的引用地址
chart.pathToImages="
amcharts/images/"
zoomOutButton
设置放大/缩小按钮的背景色和透明度
chart.zoomOutButton={
backgroundColor:
#000000'
backgroundAlpha:
0.15
};
dataProvider
指定数据来源，一般指向一个数组对象
chart.dataProvider=chartData;
categoryField
指定X轴由哪个字段决定
chart.categoryField="
date"
autoMargins
自动调整边距，如果设置为true则边距设置不起效
chart.autoMargins=true;
fontSize
字体大小
chart.fontSize=14;
color
图标颜色
chart.color="
marginTop
上边距
chart.marginTop=100;
marginLeft
左边距
chart.marginLeft=50;
marginRight
右边距
chart.marginRight=30;
addGraph（graph）
添加一个图形，可以添加多个，想要绘制图形，必须有此方法
chart.addGraph（graph1）;
validateNow（div）
当数据改变时或者属性改变时，想要重新绘图，可以调用该方法
chart.validateNow（'
chartdiv'
）;
chart.write（'
将amcharts对象写到一个div中，最常用方法
chart.chart.write（'
addListener（'
dataUpdated'
zoomChart）
添加一个监听函数，第一个参数是指定事件，第二个是调用的函数名
chart.addListener（'
zoomed'
handleZoom）;
zoomChart）;
rotate
图像是否xy轴互换，默认为false，如果想让图像顺时针旋转90°
，则设置为true
False，true
chart.rotate=false;
depth3D
设置为3d图像的厚度值
chart.depth3D=50
angle
角度，当设置图像为3d图时使用该属性，默认为0
chart.angle=40
startDuration
chart.startDuration=2
20
plotAreaBorderColor
绘图区域边框颜色
chart.plotAreaBorderColor="
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（光标）
chartCursor对象
设置光标的形状和样式
varchartCursor=newAmCharts.ChartCursor（）;
zoomable
是否可以缩放，设为true的时候，按住鼠标左键划线可以方法图像
True/false
chartCursor.zoomable=false;
cursorAlpha
光标透明度
chartCursor.cursorAlpha=0;
cursorPosition
光标位置
chartCursor.cursorPosition="
mouse"
pan
默认为false，设置为true时，光标变为四个向外的箭头形状，按住左键滑动鼠标可以将图像向左移动向右移动
chartCursor.pan=true;
categoryBalloonDateFormat
设置光标节点显示的日期格式
chartCursor.categoryBalloonDateFormat="
JJ:
NN,DDMMMM"
9、动态图表示例
1、需要在html页面增加一个div，同时设置div的id和样式，amcharts将图表显示在指定的id的div中
<
divid="
chartdiv"
style="
width:
50%;
height:
300px"
>
/div>
2、引用amchartsjs库和css样式
scriptsrc="
amcharts/amcharts.js"
type="
text/javascript"
/script>
linkrel="
stylesheet"
href="
style.css"
text/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.zoomOutButton={
chart.dataProvider=chartData;
chart.categoryField="
categoryAxis.parseDates=false;
//asourdataisdate-based,wesetparseDatestotrue
categoryAxis.dashLength=1;
categoryAxis.gridAlpha=0.15;
categoryAxis.axisColor="
//categoryAxis.position="
categoryAxis.gridPosition="
categoryAxis.startOnAxis=true;
categoryAxis.gridColor="
//CURSOR
chartCursor.zoomable=false;
//asthechartdisplayesnottoomanyvalues,wedisabledzooming
chartCursor.cursorAlpha=0;
chartCursor.cursorPosition="
chartCursor.pan=true;
//setittofalsifyouwant
升级会员 