amcharts图表使用大全

北京市博汇科技有限公司BroadwayScience&TechnologyCo.,Ltd第1页共20页北京市博汇科技有限公司AmchartsJS版属性/方法详细说明书2013.09.09北京市博汇科技有限公司BroadwayScience&TechnologyCo.,Ltd第2页共20页修改记录序号日期作者修改记录评审12013-09-09王震阳创建北京市博汇科技有限公司BroadwayScience&TechnologyCo.,Ltd第3页共20页1、坐标轴（Y轴）序号属性名/方法名作用对象获取方法/常用属性值示例1valueAxis对象图表的Y轴，一个图表中可以有多个Y轴VarvalueAxis=newAmCharts.ValueAxis();2axisColor轴的颜色valueAxis.axisColor=#FF6600;3axisThickness轴的宽度valueAxis.axisThickness=1;4gridAlpha轴的透明度，值介于0-1之间，0全透明valueAxis1.gridAlpha=0.2;5tickLength轴从下到上像左或右伸出来的延长线valueAxis1.tickLength=0;6minimum轴的最小值，如果不设置那么最小值根据数据动态变化valueAxis1.minimum=-100;7maximum轴的最大值，如果不设置那么最大值根据数据动态变化valueAxis1.maximum=100;8title轴的名称valueAxis1.title=哈哈;9logarithmic是否为对数函数分布，一般轴的刻度是均匀划分的，当该属性设置为true的时候，刻度分布呈对数形式分布valueAxis1.logarithmic=false;10integersOnly是否只显示整数，如果为true轴的刻度只显示整数形式valueAxis1.integersOnly=true;11gridCount最大刻度个数valueAxis1.gridCount=10;12unit单位valueAxis1.unit=%;北京市博汇科技有限公司BroadwayScience&TechnologyCo.,Ltd第4页共20页13labelsEnabled是否显示轴标签，默认值为truevalueAxis1.labelsEnabled=true;14inside轴的刻度值显示在表里面还是外面valueAxis1.inside=true;15position轴的位置，默认在左侧valueAxis1.position=left;16stackTypevalueAxis.stackType=0%;2、categoryAxis（图表线，相当于X轴）序号属性名/方法名作用对象获取方法/常用属性值示例1valueAxis对象图表的线，一个图表中可以有多个，每个对应一个Y轴或者共同拥有一个Y轴varcategoryAxis=chart.categoryAxis;2parseDates是否以日期为x轴的值True、falsecategoryAxis.parseDates=false;3minPeriod当以日期为x轴的时候x轴显示的最小范围SS：分钟DD：天categoryAxis.minPeriod=SS4dashLength破折线长度，默认为0是实心线categoryAxis.dashLength=1;5gridAlpha网格的透明度，垂直x轴的刻度线形成网格categoryAxis.gridAlpha=0.15;6axisColor轴的颜色categoryAxis.axisColor=#DADADA;7position轴的位置，默认在最下方top：显示在上方left:左侧right：右侧categoryAxis.position=top;8gridPosition网格位置categoryAxis.gridPosition=start;北京市博汇科技有限公司BroadwayScience&TechnologyCo.,Ltd第5页共20页9startOnAxis是否从轴上开始绘制，默认为false，即第一个点绘制是从中间开始的，当设置为true的时候，第一个点开始总是从Y轴上开始，结束总是在最后一个跟Y轴平行的轴上结束true、falsecategoryAxis.startOnAxis=true;10gridColor网格颜色categoryAxis.gridColor=#FFFFFF;11dateFormats日期格式，将数据格式化成对应的日期格式categoryAxis.dateFormats=[{period:'DD',format:'DD'},{period:'WW',format:'MMMDD'},{period:'MM',format:'MMM'},period:'YYYY',format:'YYYY'}];12minorGridEnabledSpecifiesifminorgridshouldbedisplayed.true,false3、Legend（图例）序号属性名/方法名作用对象获取方法/常用属性值示例1legend对象在图表的上方或者下方显示图例，图例的颜色就是对应线条的颜色varlegend=newAmCharts.AmLegend();2align排列样式centerlegend.align=center;3marginLeft左边缘legend.marginLeft=0;北京市博汇科技有限公司BroadwayScience&TechnologyCo.,Ltd第6页共20页4title标题legend.title=测试;5horizontalGap水平间隔，一个图表可以有多个图例，图例之间的间隔用此属性legend.horizontalGap=10;6equalWidths是否等宽legend.equalWidths=false;7valueWidth值的宽度，在图例的右侧会显示该线或者图表的当前选中的值，设置为0时则不显示值legend.valueWidth=120;8switchType暂时没明白什么意思legend.switchType=v;4、Guide（向导线）序号属性名/方法名作用对象获取方法/常用属性值示例1guide对象向导线可以是一条根Y轴平行的线，也可以是一个矩形区域varguide=newAmCharts.Guide();2fillAlpha区域透明度guide.fillAlpha=0.1;3lineAlpha线透明度guide.lineAlpha=0;4value其实值，其实指对应Y坐标的值guide.value=50;5toValue到达值，其实指对应Y坐标的值，跟上面属性共同确定了一个从value到toValue的区域，宽度为图表的宽度，高度为（toValue-value）的绝对值guide.toValue=0;6lineColor相导线的颜色guide.lineColor=#CC0000;7dashLength破折长度，默认为0为实心线条，设置值后为破折线guide.dashLength=4;8label标签，就是给向导线显示一个名字guide.label=平均值;北京市博汇科技有限公司BroadwayScience&TechnologyCo.,Ltd第7页共20页9inside是否让向导线显示在图形里面，默认为trueTrue，falseguide.inside=true;5、Scrollbar（滚动条）序号属性名/方法名作用对象获取方法/常用属性值示例1scrollbar对象滚动条可以选择图表显示的区域varchartScrollbar=newAmCharts.ChartScrollbar();3backgroundAlpha滚动条背景透明度chartScrollbar.backgroundAlpha=0.1;4backgroundColor滚动条背景颜色chartScrollbar.backgroundColor=#000000;5graphLineAlpha图像线条的透明度chartScrollbar.graphLineAlpha=0.1;6graphFillAlpha图像的填充透明度chartScrollbar.graphFillAlpha=0;7selectedGraphFillAlpha选中图像的填充色的透明度chartScrollbar.selectedGraphFillAlpha=0;8selectedGraphLineAlpha选中区域的图像线条透明度chartScrollbar.selectedGraphLineAlpha=0.25;9scrollbarHeight滚动条高度chartScrollbar.scrollbarHeight=30;10selectedBackgroundColor选中区域的背景颜色chartScrollbar.selectedBackgroundColor=#FFFFFF;6、Graph(图表)北京市博汇科技有限公司BroadwayScience&TechnologyCo.,Ltd第8页共20页序号属性名/方法名作用对象获取方法/常用属性值示例1graph对象图像对象，必须有该属性vargraph1=newAmCharts.AmGraph();2valueAxis图像的Y轴，一个chart可以添加多个graph，一个graph只能有一个valueAxisgraph1.valueAxis=valueAxis1;3valueField指定一个字段作为Y坐标值graph1.valueField=visits;4bullet图像的节点类型graph1.bullet=round;5dashLength绘制图像时延时，默认为0秒，设置为正整数时可以看到动态生成效果graph1.dashLength=0;6hideBulletsCount一个图像中当节点大于一定数值后隐藏节点形状graph1.hideBulletsCount=10;7balloonText节点显示的文本内容graph1.balloonText=[[date]]([[visits]]);8lineColor图像线颜色graph1.lineColor=#d1655d;9connect是否连接起来，是指如果数据有x轴值，但是y轴值丢失的时候，如果设置为true则忽略该点，设置为false则线条在此点处断开graph1.connect=false;10bulletBorderColor节点边框颜色graph1.bulletBorderColor=#FFFFFF;11bulletBorderThickness节点边框宽度graph1.bulletBorderThickness=2;12customBulletField用户自定义节点字段graph.customBulletField=bullet;13bulletOffset节点偏移量graph.bulletOffset=16;14cornerRadiusTopgraph.cornerRadiusTop=8;北京市博汇科技有限公司BroadwayScience&TechnologyCo.,Ltd第9页共20页15bulletSize节点大小graph.bulletSize=14;16colorField颜色字段，颜色可以从数据中读取graph1.colorField=color;17type图像类型，有line、column、smoothedLine类型，第一种为线形图，第二种为柱状图line/column/smoothedLinegraph1.type=line;18fillAlphas填充区透明度，默认为0，最大值为1，当设置值时，在线条跟x轴之间的区域会填充颜色graph1.fillAlphas=0.3;19negativeLineColor当数值为负数时线条的颜色graph1.negativeLineC