AmchartsJS版设置属性/方法详细

 

 

 

AmchartsJS版设置属性/方法详细

 

1、     坐标轴(Y轴)  

序号

属性名/方法名

作用

对象获取方法/常用属性值

示例

1

valueAxis对象

图表的Y轴,一个图表中可以有多个Y

 VarvalueAxis= 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轴的值

Truefalse

  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轴平行的轴上结束

truefalse

 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坐标的值,跟上面属性共同确定了一个从valuetoValue的区域,宽度为图表的宽度,高度为(toValue-value)的绝对值

 

 guide.toValue = 0;

6

lineColor

相导线的颜色

 

 guide.lineColor = "#CC0000";

7

dashLength

破折长度,默认为0为实心线条,设置值后为破折线

 

 guide.dashLength = 4;

8

label

标签,就是给向导线显示一个名字

 

 guide.label = "平均值";

9

inside

是否让向导线显示在图形里面,默认为true

Truefalse

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

图像类型,有linecolumnsmoothedLine类型,第一种为线形图,第二种为柱状图

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

validateNowdiv

当数据改变时或者属性改变时,想要重新绘图,可以调用该方法

 

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

Falsetrue

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样式

<scriptsrc="amcharts/amcharts.js"type="text/javascript"></script>       

<linkrel="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提供动态数据

publicclass DataProviderServlet extends HttpServlet {

    privatestaticfinallongserialVersionUID = 1L;

     publicstatic Integer i=0;

    public DataProviderServlet() {

        super();

    }

    protectedvoid 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());

      

    }

    protectedvoid doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

       doGet(request, response);

    }

}

 

5、效果截图

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值