amCharts之柱形图

最新推荐文章于 2021-12-13 03:57:54 发布

大新软件技术部

最新推荐文章于 2021-12-13 03:57:54 发布

阅读量1.3k

点赞数

分类专栏： ASP.Net开发

ASP.Net开发专栏收录该内容

72 篇文章 0 订阅

订阅专栏

先从官网给的demo开始看，最简单的demo: columnSimple 图如下：

代码如下：

[html]view plaincopyprint? 
   
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
 <html>  
       
     <head>  
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
         <title>amCharts examples</title>  
         <link rel="stylesheet" href="style.css" type="text/css">  
         <script src="../amcharts/amcharts.js" type="text/javascript"></script>           
         <script type="text/javascript">  
             var chart;  
             var chartData = [{  
                 country: "USA",  
                 visits: 4025  
             }, {  
                 country: "China",  
                 visits: 1882  
             }, {  
                 country: "Japan",  
                 visits: 1809  
             }, {  
                 country: "Germany",  
                 visits: 1322  
             }, {  
                 country: "UK",  
                 visits: 1122  
             }, {  
                 country: "France",  
                 visits: 1114  
             }, {  
                 country: "India",  
                 visits: 984  
             }, {  
                 country: "Spain",  
                 visits: 711  
             }, {  
                 country: "Netherlands",  
                 visits: 665  
             }, {  
                 country: "Russia",  
                 visits: 580  
             }, {  
                 country: "South Korea",  
                 visits: 443  
             }, {  
                 country: "Canada",  
                 visits: 441  
             }, {  
                 country: "Brazil",  
                 visits: 395  
             }, {  
                 country: "Italy",  
                 visits: 386  
             }, {  
                 country: "Australia",  
                 visits: 384  
             }, {  
                 country: "Taiwan",  
                 visits: 338  
             }, {  
                 country: "Poland",  
                 visits: 328  
             }];  
   
   
             AmCharts.ready(function () {  
                 chart = new AmCharts.AmSerialChart();//创建一个AmSerialChart对象  
                 chart.dataProvider = chartData;//dataProvider 数据提供的对象 对应上面的json数据  
                 chart.categoryField = "country";//X轴上的值  
                 chart.startDuration = 1;  
   
  <span style="white-space:pre">     </span>//X轴  
                 var categoryAxis = chart.categoryAxis;  
                 //categoryAxis.labelRotation =45 ;//X轴下面值的角度  

[html]view plaincopyprint? 
   
 <span style="white-space:pre">      </span>//Y轴  
                 var graph = new AmCharts.AmGraph();  
                 graph.valueField = "visits";//柱形图显示的值  
                 graph.balloonText = "[[category]]: [[value]]";//鼠标放上所显示的  
                 graph.type = "column";//Y轴的类型 有line、column、step、smoothedLine、candlestick、ohlc  
                 graph.lineAlpha = 0;//border透明度  
                 graph.fillAlphas = 0.8;//柱子的透明度  
                 chart.addGraph(graph);  
                 chart.write("chartdiv");  
             });  
         </script>  
     </head>  
       
     <body>  
         <div id="chartdiv" style="width: 100%; height: 400px;"></div>  
     </body>  
 </html>  

AmSerialChart 是画地域图、柱形图等等的对象。

AmGraph 是画Y轴的对象。

如果你想不同的柱子加不同的颜色的话需要做2件事：

1.把json数据多加一个属性 ex:{country:"USA",visits:4025,color: "#F8FF01"}

2.在Y轴的对象上添加一个颜色属性 graph.colorField = "color";

这样就可以得到不同颜色。

第2个demo是双柱形图，如图：

[sql]view plaincopyprint? 
   
 var chart;  
   
             var chartData = [{  
                 dealer: "一月",  
                 a: 2.6,  
                 b: 2.7,  
                  
             }, {  
                 dealer: "二月",  
                 a: 2.6,  
                 b: 2.7,  
                  
                 
             }, {  
                 dealer: "三月",  
                 a: 2.6,  
                 b: 2.7,  
                   
                 
             }, {  
                 dealer: "四月",  
                 a: 2.6,  
                 b: 2.7,  
                   
                 
             }];  
   
             AmCharts.ready(function () {  
                 // SERIALL CHART  
                 chart = new AmCharts.AmSerialChart();  
                 chart.dataProvider = chartData;  
                 chart.categoryField = "dealer";  
                 //chart.rotate = true;//把柱形图变成横向  
   
                 var categoryAxis = chart.categoryAxis;  
                 categoryAxis.gridAlpha = 0.1;//数格的边线透明度  
                 categoryAxis.axisAlpha = 0.4;//X轴的透明度  
                 categoryAxis.inside=false;//X轴数值在图里面还是瓦面  
                 categoryAxis.position = "bottom";//X轴位置  
                       
                 var valueAxis = new AmCharts.ValueAxis();  
                 //valueAxis.stackType = "regular";  
                 valueAxis.gridAlpha = 0;  
                 valueAxis.axisAlpha = 0.4;  
                 chart.addValueAxis(valueAxis);  
   
                 // firstgraph   
                 var graph = new AmCharts.AmGraph();  
                 graph.title = "注册用户";  
                 //graph.labelText = "[[value]]";  
                 graph.valueField = "a";//跟json数据中a相对应  
                 graph.balloonText="[[title]]:[[value]]人" //鼠标放上显示的值  
                 graph.type = "column";  
                 graph.lineAlpha = 1;  
                 graph.fillAlphas = 1;  
                 graph.lineColor = "#83c417";  
                 chart.addGraph(graph);  
   
                 // second graph                                
                 graph = new AmCharts.AmGraph();  
                 graph.title = "停用用户";  
                 //graph.labelText = "[[value]]";  
                 graph.valueField = "b";  
                 graph.balloonText="[[title]]:[[value]]人"  
                 graph.type = "column";  
                 graph.lineAlpha = 1;  
                 graph.fillAlphas = 1;  
                 //graph.fillColors="#ffc92e"  
                 graph.lineColor = "#f27324";  
                 chart.addGraph(graph);  

[sql]view plaincopyprint? 
   
   

[sql]view plaincopyprint? 
   
 <span style="white-space:pre">      </span>//控制柱子上鼠标事件的代码，修改tip的样式  
         var balloon = chart.balloon;  
         balloon.adjustBorderColor = true;  
         balloon.horizontalPadding = 10;  
         balloon.fontSize = 14;  
         balloon.pointerWidth= 5;  
         balloon.color = "#000000";  
         balloon.cornerRadius = 0;  
         balloon.borderThickness=1;  
         balloon.borderColor="#999999";  
         balloon.borderAlpha=1;  
         balloon.fillColor = "#FFFFFF";  
                
   
                 // LEGEND 用来显示下面分组的代码  
                 var legend = new AmCharts.AmLegend();  
                 legend.position = "bottom";  
                 legend.borderAlpha = 0;  
                 legend.horizontalGap = 10;  
                 legend.switchType = "v";//图片上面默认显示对号   
                 chart.addLegend(legend);  
   
                 // WRITE  
                 chart.write("chartdiv");  
             });  

amCharts.AmLegend() 对象用来生成分组。
如果想变成一个柱子代表几个数据的话，如下图：

只需要增加valueAxis.stackType = "regular"; 代码就可以了

=========================

关于amcahrt的破解和使用

=============================================================

现在做图表的chart使用，amchart很方便，很漂亮，
新建一个类，比如amDemoChart.as如下，接着，在自己的组建中，引用即可，拓展后，可以和java类连接，用来展示想要的数据图表
但是，注意，展示中，可能很多效果不如意，所以一定要先明白那些属性的意义，这个amchart的网站是有的，这里给个注意点，amchart人如果横轴坐标不显示，注意看labelrotaion 的设置
package
{
import com.amcharts.AmSerialChart;
public class AmcChart extends AmSerialChart
{
  override protected function createChildren():void{
super.createChildren();
if(_amchartsLink){
_amchartsLink.alpha=0;
_amchartsLink.width=0;
_amchartsLink.height=0;
_amchartsLink.visible=false;
}
return;
  }

}
}
如上可以破解，去除amchart上的那个小链接

如下是一个例子

var amnew:amDemoChart=new amDemoChart();
amnew.dataProvider=array;

amnew.percentHeight=100;
amnew.percentWidth=100;
amnew.styleName="amStyle";
amnew.setStyle("marginTop",30);
amnew.setStyle("marginLeft",60);
amnew.setStyle("marginBottom",60);
amnew.categoryField="NAME";
amnew.setStyle("startDuration",1);
amnew.setStyle("angle",30);
amnew.setStyle("depth3D",15);
amnew.setStyle("plotAreaFillAlphas",[0]);
amnew.autoMargins=false;

ag1.balloonText="[[category]]时间:[[value]]" ;//注意此处的两个值，是默认的变量，不能修改
ag1.setStyle("color","0x6600CC");
ag1.title=FieldYTitle;
ag1.valueField="VALUE";
ag1.type = "column";
ag1.setStyle("lineAlpha",0);
ag1.setStyle("fillColors",[0xADD981,0xADD981]);
ag1.setStyle("fillAlphas",[0.8]);

amnew.graphs.push(ag1);

ag2.markerType="line";
ag2.setStyle("bullet","round");
ag2.setStyle("lineThickness","2");
ag2.title=FieldYTitle;
ag2.valueField="VALUE";
amnew.graphs.push(ag2);

var cAxis:CategoryAxis=new CategoryAxis();
cAxis.gridPosition="start";
cAxis.setStyle("gridCount",ChartDataXMLList.length());
cAxis.setStyle("dashLength",5);
//cAxis.setStyle("labelRotation","60");
cAxis.setStyle("fontSize","11");

var vAxis:ValueAxis=new ValueAxis();
vAxis.setStyle("dashLength",5);

amnew.categoryAxis=cAxis;
amnew.valueAxes.push(vAxis);

var amLd:AmLegend=new AmLegend();
amLd.dataProvider=amnew;
amLd.percentWidth=100;
amLd.setStyle("switchType","v");
amLd.setStyle("marginLeft",200);
amLd.setStyle("marginTop",4);
amLd.textClickEnabled=false;

var amBalloon:AmBalloon=new AmBalloon();
amBalloon.setStyle("cornerRadius",10);
amBalloon.setStyle("borderThickness",2);
amBalloon.setStyle("borderColor","#FFFFFF");
amBalloon.setStyle("borderAlpha",1);
amnew.balloon=amBalloon;

var amChartCursor:ChartCursor=new ChartCursor();
amChartCursor.zoomable=false;
amChartCursor.categoryBalloonEnabled=false;
amChartCursor.setStyle("cursorAlpha","0");
amnew.chartCursor=amChartCursor;

this.addChild(amLd);
this.addChild(amnew);

大新软件技术部

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
amCharts之柱形图

先从官网给的demo开始看，最简单的demo: columnSimple 图如下：代码如下：[html] view plaincopyprint?> html> head> meta http-equiv="Content-Type" content="text/h
复制链接

扫一扫