AmchartsJS版设置属性/方法总结

                                AmchartsJS版设置属性/方法总结

1、ValueAxis  坐标轴（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轴	var categoryAxis =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: 'MMM DD'}, {period: 'MM',format:'MMM'},    period: 'YYYY', format: 'YYYY' }];

3、Legend（图例）

序号	属性名/方法名	作用	对象获取方法/常用属性值	示例
1	legend对象	在图表的上方或者下方显示图例，图例的颜色就是对应线条的颜色	var legend = 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轴平行的线，也可以是一个矩形区域	var guide = 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对象	滚动条可以选择图表显示的区域	var chartScrollbar = new AmCharts.ChartScrollbar();
2	backgroundAlpha	滚动条背景透明度		chartScrollbar.backgroundAlpha = 0.1;
3	backgroundColor	滚动条背景颜色		chartScrollbar.backgroundColor = "#000000";
4	graphLineAlpha	图像线条的透明度		chartScrollbar.graphLineAlpha = 0.1;
5	graphFillAlpha	图像的填充透明度		chartScrollbar.graphFillAlpha = 0;
6	selectedGraphFillAlpha	选中图像的填充色的透明度		chartScrollbar.selectedGraphFillAlpha = 0;
7	selectedGraphLineAlpha	选中区域的图像线条透明度		chartScrollbar.selectedGraphLineAlpha = 0.25;
8	scrollbarHeight	滚动条高度		chartScrollbar.scrollbarHeight = 30;
9	selectedBackgroundColor	选中区域的背景颜色		chartScrollbar.selectedBackgroundColor = "#FFFFFF";

6、  Graph (图表)

序号	属性名/方法名	作用	对象获取方法/常用属性值	示例
1	graph对象	图像对象，必须有该属性	var graph1 = 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 的核心对象	var chart = 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";
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);

8、 ChartCursor（光标）

序号	属性名/方法名	作用	对象获取方法/常用属性值	示例
1	chartCursor 对象	设置光标的形状和样式	var chartCursor = 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, DD MMMM";

9、示例：

条形图：https://blog.csdn.net/class157/article/details/92835681

饼状图：https://blog.csdn.net/class157/article/details/93158594