Amcharts JS 版属性/方法详细说明书
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程序,给amcharts提供动态数据
public class DataProviderServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public static Integer i=0;
public DataProviderServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
StringBuilder sb = new StringBuilder();
sb.append(i++).append(" ").append(new Random().nextInt(100)*(i%2==0?(-1):(1)));
System.out.println(sb.toString());
response.getWriter().write(sb.toString());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
5、效果截图
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程序,给amcharts提供动态数据
public class DataProviderServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public static Integer i=0;
public DataProviderServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
StringBuilder sb = new StringBuilder();
sb.append(i++).append(" ").append(new Random().nextInt(100)*(i%2==0?(-1):(1)));
System.out.println(sb.toString());
response.getWriter().write(sb.toString());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
5、效果截图