amcharts图表使用总结.doc

北京市博汇科技有限公司
Broadway Science & Technology Co., Ltd

北京市博汇科技有限公司

Amcharts JS 版属性/方法详细说明书

2013.09.09

修改记录
序号
日期
作者
修改记录
评审
1
2013-09-09
王震阳
创建

1、 坐标轴（Y轴）
序号
属性名/方法名
作用
对象获取方法/常用属性值
示例
1
valueAxis对象
图表的Y轴，一个图表中可以有多个Y轴
Var valueAxis = new AmCharts.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'
}];
12

3、 Legend（图例）
序号
属性名/方法名
作用
对象获取方法/常用属性值
示例
1
legend对象
在图表的上方或者下方显示图例，图例的颜色就是对应线条的颜色
var legend = new AmCharts.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 = new AmCharts.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();

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对象
图像对象，必须有该属性
var graph1 = new AmCharts.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 = new AmCharts.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 对象
设置光标的形状和样式
var chartCursor = new AmCharts.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、 动态图表示例
1、需要在html页面增加一个div，同时设置div的id和样式，amcharts将图表显示在指定的id的div中
<div id="chartdiv" style="width: 50%; height: 300px"></div>
2、 引用amcharts js 库和css样式
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css">
3、 设定一个定时器，循环调用函数
window.setInterval(show,2000);//每隔2秒调用一次show（）方法，show方法完成绘图功能
function show(){
var chart = new AmCharts.AmSerialChart();
var valueAxis1 = new AmCharts.ValueAxis();
var graph1 = new AmCharts.AmGraph();
var categoryAxis = chart.categoryAxis;
var guide = new AmCharts.Guide();
var legend = new AmCharts.AmLegend();
var chartCursor = new AmCharts.ChartCursor();
//设定最大显示数值个数
generateChartData();
chart.pathToImages = "amcharts/images/";
chart.zoomOutButton = {
backgroundColor: '#000000',
backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
chart.categoryField = "date";
categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
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; // as the chart displayes not too many values, we disabled zooming
chartCursor.cursorAlpha = 0;
chartCursor.cursorPosition = "mouse";
chartCursor.pan = true; // set it to fals if you want the cursor to work in "select" mode
chart.addChartCursor(chartCursor);

valueAxis1.axisColor = "#FF6600";
valueAxis1.axisThickness = 1;
valueAxis1.gridAlpha = 0;
valueAxis1.tickLength =0;
valueAxis1.minimum = -100;
valueAxis1.maximum = 100;
valueAxis1.title="哈哈";
valueAxis1.logarithmic = false; // this line makes axis logarithmic
valueAxis1.integersOnly = true;
valueAxis1.gridCount = 10;
valueAxis1.unit = "%";
valueAxis1.labelsEnabled = true;
valueAxis1.inside = true;
valueAxis1.position = "left";

chart.addValueAxis(valueAxis1);

// LEGEND
legend.align = "center";
legend.marginLeft = 0;
legend.title="测试";
legend.horizontalGap = 10;
legend.equalWidths = false;
legend.valueWidth = 120;
chart.addLegend(legend);

guide.fillAlpha = 0.1;
guide.lineAlpha = 0;
guide.value = 50;
guide.toValue = 0;
guide.lineColor = "#CC0000";
guide.dashLength = 4;
guide.label = "平均值";
guide.inside = true;
guide.lineAlpha = 1;

var guide1 = new AmCharts.Guide();
guide1.lineColor = "#CC0000";
guide1.lineAlpha = 1;
guide1.dashLength = 2;
guide1.inside = true;
guide1.labelRotation = 90;
categoryAxis.addGuide(guide1);
valueAxis1.addGuide(guide);

graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph1.title = "红色";
graph1.valueField = "visits";
graph1.bullet = "round";
graph1.dashLength = 0;
graph1.hideBulletsCount = 10;
graph1.balloonText = "[[date]] ([[visits]])";
graph1.lineColor = "#d1655d";
graph1.connect = false;
graph1.negativeLineColor = "#efcc26";
graph1.bulletBorderColor = "#FFFFFF";
graph1.bulletBorderThickness = 2;
graph1.type = "smoothedLine"; // this line makes the graph smoothed line.
graph1.fillAlphas = 0.3; // setting fillAlphas to > 0 value makes it area graph
chart.addGraph(graph1);

chart.addTitle("测试动态报表图", 5);
chart.plotAreaBorderColor = "#000000";
chart.plotAreaBorderAlpha = 5;
chart.autoMargins = true;
chart.fontSize = 14;
chart.write('chartdiv');

chart=null;
valueAxis1 = null;
graph1 = null;
categoryAxis = null;
guide = null;
legend = null;
}

function generateChartData() {
$.ajax({
type : "get",
url : "${pageContext.request.contextPath}/getData",
dataType : "text",
data : {
},
success : function(result) {
parseData(result,20);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("请求异常，请检查服务器是否正常运行！" + XMLHttpRequest.status + " "
+ XMLHttpRequest.readyState + " " + textStatus);
}
});
}

function parseData(data,num){
var tempDate = [];
tempDate = data.split(" ");
chartData.push({
date:tempDate[0],
visits:tempDate[1]
});
var newChartData=[];
var len=chartData.length;
if(len>num){
for(var m=0;m<num;m++){
newChartData[m]=chartData[len-num+m];
}
chartData = newChartData;
newChartData=null;
}
len=null;
visits=null;
}

4、 写一个servlet程序，给am