ArmchartJs版屬性學(xué)習(xí)與總結(jié)-創(chuàng)新互聯(lián)

一簡(jiǎn)介

成都創(chuàng)新互聯(lián)公司-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比蒙自網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式蒙自網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋蒙自地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴(lài)。

 amCharts 是一個(gè)致力于圖表組件開(kāi)發(fā)的公司，公司地址在立陶宛首都維爾紐斯，2004年開(kāi)始推出圖表和地圖組件。截至目前，amCharts提供了JavaScript/HTML5 Charts、Javascript/HTML5 Stock Chart、JavaScript Maps三種圖表組件。

amCharts支持柱狀圖、條形圖、線形圖、面積圖、燭臺(tái)圖、雷達(dá)等基本圖形。

amCharts功能特點(diǎn)：圖表可以為動(dòng)畫(huà)或靜態(tài)

                   價(jià)值軸能夠扭轉(zhuǎn)

                   線性或?qū)?shù)軸的價(jià)值尺度

                   定制描述任何數(shù)據(jù)點(diǎn)

                   設(shè)置和數(shù)據(jù)可以通過(guò)直接從一個(gè)HTML文件

二．操作amCharts常用對(duì)象

1.valueAxis對(duì)象：表示圖標(biāo)的Y軸，使用方法：var valueAxis=new AmCharts.ValueAxis();

2.categoryAxis對(duì)象：表示圖表的X軸，用法：var categoryAxis=new AmCharts.categoryAxis();

3.Legend對(duì)象:表示在圖表的上方或者下方顯示，圖例的顏色就是對(duì)應(yīng)線條的顏色，用法：var legend=new AmCharts.Legend();

4.Guide對(duì)象：表示一條跟Y軸平行的線，或者是矩形，用法：var guide=new AmCharts.Guide();

5.Scrollbar對(duì)象：表示可以選擇圖表顯示的區(qū)域，用法var chartScrollbar = new AmCharts.ChartScrollbar();

6.Graph對(duì)象：表示對(duì)象對(duì)象，必須有的屬性，用法：var graph = new AmCharts.AmGraph();

7.Chart對(duì)象：是核心對(duì)象，用法：  chart = new AmCharts.AmSerialChart();

8.chartCursor對(duì)象：表示設(shè)置鼠標(biāo)的形狀和樣式，用法： var chartCursor = new AmCharts.ChartCursor();

三.各個(gè)對(duì)象下有許多屬性,比如：

（1）valueAxis對(duì)象的常用屬性：

      axisColor:軸的顏色，用法： valueAxis.axisColor = "#ccc";

      axisThickness:軸的寬度，用法：valueAxis.axisThickness=2；

      gridAlpha:軸的透明度，用法：valueAxis.gridAlpha=0.5;

      tickLength：軸從下到上向左或向右伸出來(lái)的延長(zhǎng)線，用法：valueAxis.tickLength=0；

      tittle：軸的名稱(chēng)；

     logarithmic:是否為對(duì)數(shù)函數(shù)分布，一般軸的刻度是均勻劃分的，當(dāng)該屬性設(shè)置為true的時(shí)候，刻度分布成對(duì)數(shù)形式，用法：valueAxis.logarithmic = true;

     gridCount:大刻度個(gè)數(shù)。用法：valueAxis.gridCount;

     unit:單位。用法：valueAxis.unit=“%”；

     inside：軸的刻度值顯示在里面還是外面。用法： valueAxis.inside = "true";

    Position:軸的位置，默認(rèn)在左側(cè)，用法：valueAxis.position=“l(fā)eft”；

其他對(duì)象的屬性值，還在繼續(xù)整理中，以后繼續(xù)補(bǔ)充完善....

使用這些對(duì)象及對(duì)象的某些屬性，簡(jiǎn)單實(shí)現(xiàn)圖表顯示功能：

 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;//為了測(cè)試?yán)与S便給的數(shù)值
            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為核心對(duì)象       
           
                chart.dataProvider = json;
                chart.categoryField = "name";//指定X軸由哪個(gè)字段決定
                chart.color="black";//設(shè)置圖標(biāo)顏色，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 = "折線圖--文章數(shù)量的變化";
                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";//圖像類(lèi)型，有l(wèi)ine,column,smoothedLine
                graph.bullet = "round"; //圖像的節(jié)點(diǎn)類(lèi)型。
                graph.dashLength=1;//繪制圖像時(shí)延時(shí)，默認(rèn)為0秒，設(shè)置正整數(shù)時(shí)，可以看到動(dòng)態(tài)效果。
                graph.bulletColor = "#FFFFFF";//節(jié)點(diǎn)的填充顏色
                graph.bulletBorderColor = "#00BBCC";//節(jié)點(diǎn)的邊框顏色
                graph.bulletBorderThickness = 2;//節(jié)點(diǎn)邊框厚度
                graph.bulletSize = 9;//節(jié)點(diǎn)大小
                graph.title = "value";
                graph.valueField = "value";
                graph.lineThickness = 2;
                graph.lineColor = "#00BBCC";//圖像線顏色
                 //鼠標(biāo)移入提示信息
                graph.balloonText = "結(jié)果值`category` `value`"; //文本節(jié)點(diǎn)的內(nèi)容
                chart.addGraph(graph);             
           
            
                legend = new AmCharts.AmLegend();
                legend.align = "center";
                legend.markerType = "circle";
                legend.title="顯示結(jié)果為";
                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軸互換，默認(rèn)為false,讓圖像順時(shí)針旋轉(zhuǎn)90度，則設(shè)置為true;     
        chart.rotate = false;
		//設(shè)置3d圖像的厚度值  
        chart.depth4D = 10;  
		//設(shè)置3D圖像時(shí)，使用旋轉(zhuǎn)角度角度
        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柱狀圖--文章數(shù)量的變化"; //標(biāo)題		
        valueAxis.gridAlpha = 0.5;  //Y軸線透明度
        chart.addValueAxis(valueAxis);  
        var graph = new AmCharts.AmGraph();  
        graph.title = "value";  
        graph.valueField = "value";  
        graph.type = "column";         
        graph.balloonText = "測(cè)試數(shù)據(jù)`category` `value`";  		
        graph.lineAlpha =0.3; //邊框透明度		
         graph.fillColors = "#00BBCC"; //填充顏色 
        graph.fillAlphas = 1; 		
        chart.addGraph(graph);       
        
        chart.write("xianshi");  
};  

              }

Armchart Js版屬性學(xué)習(xí)與總結(jié) Armchart Js版屬性學(xué)習(xí)與總結(jié)

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前題目：ArmchartJs版屬性學(xué)習(xí)與總結(jié)-創(chuàng)新互聯(lián)
分享URL：http://muchs.cn/article30/pcpso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、外貿(mào)網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)頁(yè)設(shè)計(jì)公司、微信小程序、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁(yè)設(shè)計(jì)公司