ArmchartJs版属性学习与总结-创新互联
一简介
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比蒙自网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式蒙自网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖蒙自地区。费用合理售后完善,十多年实体公司更值得信赖。amCharts 是一个致力于图表组件开发的公司,公司地址在立陶宛首都维尔纽斯,2004年开始推出图表和地图组件。截至目前,amCharts提供了JavaScript/HTML5 Charts、Javascript/HTML5 Stock Chart、JavaScript Maps三种图表组件。
amCharts支持柱状图、条形图、线形图、面积图、烛台图、雷达等基本图形。
amCharts功能特点:图表可以为动画或静态
价值轴能够扭转
线性或对数轴的价值尺度
定制描述任何数据点
设置和数据可以通过直接从一个HTML文件
二.操作amCharts常用对象
1.valueAxis对象:表示图标的Y轴,使用方法:var valueAxis=new AmCharts.ValueAxis();
2.categoryAxis对象:表示图表的X轴,用法:var categoryAxis=new AmCharts.categoryAxis();
3.Legend对象:表示在图表的上方或者下方显示,图例的颜色就是对应线条的颜色,用法:var legend=new AmCharts.Legend();
4.Guide对象:表示一条跟Y轴平行的线,或者是矩形,用法:var guide=new AmCharts.Guide();
5.Scrollbar对象:表示可以选择图表显示的区域,用法var chartScrollbar = new AmCharts.ChartScrollbar();
6.Graph对象:表示对象对象,必须有的属性,用法:var graph = new AmCharts.AmGraph();
7.Chart对象:是核心对象,用法: chart = new AmCharts.AmSerialChart();
8.chartCursor对象:表示设置鼠标的形状和样式,用法: var chartCursor = new AmCharts.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){ var json=[ {"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"} ] var average = 45;//为了测试例子随便给的数值 var zhibiaoObj=document.getElementById('zhibiao'); var zongtiObj=document.getElementById('zongti'); var xianshiObj=document.getElementById('xianshi'); var xianshiObj1=document.getElementById('xianshi1'); zongtiObj.addEventListener("click", GetSerialChart1,false); zhibiaoObj.addEventListener("click", GetSerialChart2,false); function GetSerialChart1(){ xianshiObj.style.display="none"; xianshiObj1.style.display="inline-block"; chart = new AmCharts.AmSerialChart(); //chart为核心对象 chart.dataProvider = json; chart.categoryField = "name";//指定X轴由哪个字段决定 chart.color="black";//设置图标颜色,X轴与Y轴的字体颜色 var categoryAxis = chart.categoryAxis; categoryAxis.dashLength = 2; categoryAxis.gridAlpha = 0.15; categoryAxis.axisColor = "#DADADA"; categoryAxis.title="折线图--不同文章"; var valueAxis = new AmCharts.ValueAxis(); valueAxis.axisColor = "#ccc"; valueAxis.dashLength = 1; valueAxis.title = "折线图--文章数量的变化"; valueAxis.gridAlpha = 0.2; //刻度线透明度 chart.addValueAxis(valueAxis); var guide = new AmCharts.Guide();// 是一条与Y轴平行的线 guide.value = average; guide.lineColor = "#Cf0000"; guide.dashLength = 4; guide.label = "平均值"; guide.lineAlpha = 1; valueAxis.addGuide(guide); var graph = new AmCharts.AmGraph(); graph.type = "smoothedLine";//图像类型,有line,column,smoothedLine graph.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 = new AmCharts.AmLegend(); legend.align = "center"; legend.markerType = "circle"; legend.title="显示结果为"; chart.addLegend(legend); // WRITE chart.write("xianshi1"); }; function GetSerialChart2(){ xianshiObj.style.display="inline-block"; xianshiObj1.style.display="none"; chart = new AmCharts.AmSerialChart(); chart.dataProvider = json; chart.categoryField = "name"; //图像是否XY轴互换,默认为false,让图像顺时针旋转90度,则设置为true; chart.rotate = false; //设置3d图像的厚度值 chart.depth4D = 10; //设置3D图像时,使用旋转角度角度 chart.angle = 5; var categoryX = chart.categoryAxis; categoryX.axisColor = "#efefef";//X轴的颜色 categoryX.gridColor="black"; categoryX.title = "3D柱状图--不同文章"; var valueAxis = new AmCharts.ValueAxis(); valueAxis.axisColor = "#ccc"; //Y轴线颜色 valueAxis.title = "3D柱状图--文章数量的变化"; //标题 valueAxis.gridAlpha = 0.5; //Y轴线透明度 chart.addValueAxis(valueAxis); var graph = new AmCharts.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"); }; }
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
标题名称:ArmchartJs版属性学习与总结-创新互联
标题网址:http://scyanting.com/article/pcpso.html