一简介

amCharts是一个致力于图表组件开发的公司,公司地址在立陶宛首都维尔纽斯,2004年开始推出图表和地图组件。截至目前,amCharts提供了JavaScript/HTML5Charts、Javascript/HTML5StockChart、JavaScriptMaps三种图表组件。

amCharts支持柱状图、条形图、线形图、面积图、烛台图、雷达等基本图形。

amCharts功能特点:图表可以为动画或静态

价值轴能够扭转

线性或对数轴的价值尺度

定制描述任何数据点

设置和数据可以通过直接从一个HTML文件

二.操作amCharts常用对象

1.valueAxis对象:表示图标的Y轴,使用方法:varvalueAxis=newAmCharts.ValueAxis();

2.categoryAxis对象:表示图表的X轴,用法:varcategoryAxis=newAmCharts.categoryAxis();

3.Legend对象:表示在图表的上方或者下方显示,图例的颜色就是对应线条的颜色,用法:varlegend=newAmCharts.Legend();

4.Guide对象:表示一条跟Y轴平行的线,或者是矩形,用法:varguide=newAmCharts.Guide();

5.Scrollbar对象:表示可以选择图表显示的区域,用法varchartScrollbar=newAmCharts.ChartScrollbar();

6.Graph对象:表示对象对象,必须有的属性,用法:vargraph=newAmCharts.AmGraph();

7.Chart对象:是核心对象,用法:chart=newAmCharts.AmSerialChart();

8.chartCursor对象:表示设置鼠标的形状和样式,用法:varchartCursor=newAmCharts.ChartCursor();

三.各个对象下有许多属性,比如:

(1)valueAxis对象的常用属性:

axisColor:轴的颜色,用法:valueAxis.axisColor="#ccc";

axisThickness:轴的宽度,用法:valueAxis.axisThickness=2;

gridAlpha:轴的透明度,用法:valueAxis.gridAlpha=0.5;

tickLength:轴从下到上向左或向右伸出来的延长线,用法:valueAxis.tickLength=0;

tittle:轴的名称;

logarithmic:是否为对数函数分布,一般轴的刻度是均匀划分的,当该属性设置为true的时候,刻度分布成对数形式,用法:valueAxis.logarithmic=true;

gridCount:最大刻度个数。用法:valueAxis.gridCount;

unit:单位。用法:valueAxis.unit=“%”;

inside:轴的刻度值显示在里面还是外面。用法:valueAxis.inside="true";

Position:轴的位置,默认在左侧,用法:valueAxis.position=“left”;

其他对象的属性值,还在继续整理中,以后继续补充完善....

使用这些对象及对象的某些属性,简单实现图表显示功能:

window.onload=function(e){varjson=[{"name":"文章1","value":"35"},{"name":"文章2","value":"60"},{"name":"文章3","value":"22"},{"name":"文章4","value":"65"},{"name":"文章5","value":"35"},{"name":"文章6","value":"22"},{"name":"文章7","value":"43"},{"name":"文章8","value":"55"},{"name":"文章9","value":"15"}]varaverage=45;//为了测试例子随便给的数值varzhibiaoObj=document.getElementById('zhibiao');varzongtiObj=document.getElementById('zongti');varxianshiObj=document.getElementById('xianshi');varxianshiObj1=document.getElementById('xianshi1');zongtiObj.addEventListener("click",GetSerialChart1,false);zhibiaoObj.addEventListener("click",GetSerialChart2,false);functionGetSerialChart1(){xianshiObj.style.display="none";xianshiObj1.style.display="inline-block";chart=newAmCharts.AmSerialChart();//chart为核心对象chart.dataProvider=json;chart.categoryField="name";//指定X轴由哪个字段决定chart.color="black";//设置图标颜色,X轴与Y轴的字体颜色varcategoryAxis=chart.categoryAxis;categoryAxis.dashLength=2;categoryAxis.gridAlpha=0.15;categoryAxis.axisColor="#DADADA";categoryAxis.title="折线图--不同文章";varvalueAxis=newAmCharts.ValueAxis();valueAxis.axisColor="#ccc";valueAxis.dashLength=1;valueAxis.title="折线图--文章数量的变化";valueAxis.gridAlpha=0.2;//刻度线透明度chart.addValueAxis(valueAxis);varguide=newAmCharts.Guide();//是一条与Y轴平行的线guide.value=average;guide.lineColor="#Cf0000";guide.dashLength=4;guide.label="平均值";guide.lineAlpha=1;valueAxis.addGuide(guide);vargraph=newAmCharts.AmGraph();graph.type="smoothedLine";//图像类型,有line,column,smoothedLinegraph.bullet="round";//图像的节点类型。graph.dashLength=1;//绘制图像时延时,默认为0秒,设置正整数时,可以看到动态效果。graph.bulletColor="#FFFFFF";//节点的填充颜色graph.bulletBorderColor="#00BBCC";//节点的边框颜色graph.bulletBorderThickness=2;//节点边框厚度graph.bulletSize=9;//节点大小graph.title="value";graph.valueField="value";graph.lineThickness=2;graph.lineColor="#00BBCC";//图像线颜色//鼠标移入提示信息graph.balloonText="结果值`category``value`";//文本节点的内容chart.addGraph(graph);legend=newAmCharts.AmLegend();legend.align="center";legend.markerType="circle";legend.title="显示结果为";chart.addLegend(legend);//WRITEchart.write("xianshi1");};functionGetSerialChart2(){xianshiObj.style.display="inline-block";xianshiObj1.style.display="none";chart=newAmCharts.AmSerialChart();chart.dataProvider=json;chart.categoryField="name";//图像是否XY轴互换,默认为false,让图像顺时针旋转90度,则设置为true;chart.rotate=false;//设置3d图像的厚度值chart.depth4D=10;//设置3D图像时,使用旋转角度角度chart.angle=5;varcategoryX=chart.categoryAxis;categoryX.axisColor="#efefef";//X轴的颜色categoryX.gridColor="black";categoryX.title="3D柱状图--不同文章";varvalueAxis=newAmCharts.ValueAxis();valueAxis.axisColor="#ccc";//Y轴线颜色valueAxis.title="3D柱状图--文章数量的变化";//标题valueAxis.gridAlpha=0.5;//Y轴线透明度chart.addValueAxis(valueAxis);vargraph=newAmCharts.AmGraph();graph.title="value";graph.valueField="value";graph.type="column";graph.balloonText="测试数据`category``value`";graph.lineAlpha=0.3;//边框透明度graph.fillColors="#00BBCC";//填充颜色graph.fillAlphas=1;chart.addGraph(graph);chart.write("xianshi");};}