amcharts的一些用法

function chartdiv2() {
            var chart;  
            var chartData = [ {
                "month" : "2015-08",
                "网损率" : 7.28,
            }, {
                "month" : "2015-09",
                "网损率" : 6.76,
            }, {
                "month" : "2015-10",
                "网损率" : 6.54,
            }, {
                "month" : "2015-11",
                "网损率" : 6.95,
            }, {
                "month" : "2015-12",
                "网损率" : 6.63,
            }, {
                "month" : "2016-01",
                "网损率" : 6.89,
            }, {
                "month" : "2016-02",
                "网损率" : 6.87,
            }, {
                "month" : "2016-03",
                "网损率" : 7.12,
            }, {
                "month" : "2016-04",
                "网损率" : 7.12,
            }, {
                "month" : "2016-05",
                "网损率" : 6.56,
            }, {
                "month" : "2016-06",
                "网损率" : 7.55,
            }, {
                "month" : "2016-07",
                "网损率" : 7.09,
            } ];   //数据源
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;  //获取数据
            chart.categoryField = "month";  横坐标
            chart.color = "#000000"; //标题颜色
            chart.fontSize = 12;  //标题大小
            chart.startDuration = 1;//动画
            chart.angle = 50;   //倾斜角度
            chart.columnWidth = 0.6; //柱状图宽度
            chart.depth3D = 8;//3D厚度
            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.gridAlpha = 0;  //网格线透明度
            categoryAxis.gridPosition = "start";
            categoryAxis.gridColor = "#000000"; //网格线颜色
            categoryAxis.axisColor = "#000000";  //横坐标轴颜色
            categoryAxis.axisAlpha = 0.5; //坐标轴透明度
            categoryAxis.dashLength = 0.5;  //当这个值为1时网格线为实线
            categoryAxis.fontSize=9;  //横坐标坐标轴字体大小
            categoryAxis.labelRotation = 30;  //横坐标倾斜角度

            var legend = new AmCharts.AmLegend(); //图例
            legend.useGraphSettings = true;
            legend.position = "top";
            legend.align = "right";
            legend.markerSize = 12;
            legend.fontSize = 12;
            legend.equalWidths = false;
            legend.valueWidth = 0;
            chart.addLegend(legend);

            var valueAxis = new AmCharts.ValueAxis();  //纵坐标轴
            valueAxis.gridAlpha = 0.5;
            valueAxis.gridColor = "#000000";
            valueAxis.axisColor = "#000000";
            valueAxis.axisAlpha = 0.5;
            valueAxis.dashLength = 5;
            chart.addValueAxis(valueAxis);

            // GRAPHS
            // first graph
            var graph1 = new AmCharts.AmGraph();  
            graph1.title = "网损率(%)";
            graph1.valueField = "网损率";  //数据源
            graph1.type = "column";     //表示柱状图
            graph1.lineAlpha = 1;    
            graph1.lineColor = "#438eb9"; 
            graph1.columnWidth = 0.5;  //柱子的宽度
            graph1.fillAlphas = 0.7;  //透明度
            graph1.balloonText = " [[category]] 网损率(%): <b>[[value]]</b>";  //浮泡
            chart.addGraph(graph1);  
            chart.write("chartdiv-serial");
        }

 

转载于:https://www.cnblogs.com/soup227/p/5750318.html

xml <!-- [xml] (xml / csv) 数据类型xml/csv--> ; <!-- 如果使用csv作为数据的话,需要使用这个属性;表示文件数据分隔符,(平常以";"和","为主) [;] (string) csv file data separator (you need it only if you are using csv file for your data) --> 1 <!-- 如果使用的是csv数据,可以设置跳过几行再显示数据,默认为0表示csv中的数据全部显示,大于n(n>0);表示前面n行都不显示[0] (Number) if you are using csv data type, you can set the number of rows which should be skipped here --> <!-- 设置系统中的字体[Arial] (font name) use device fonts, such as Arial, Times New Roman, Tahoma, Verdana... --> <!-- 设置所有文本的大小,默认为11,具体的文本的字体大小也可以在下面的设置中设置[11] (Number) text size of all texts. Every text size can be set individually in the settings below --> <!-- 同上[#000000] (hex color code) main text color. Every text color can be set individually in the settings below--> . <!-- 小数分隔符,默认为[,]注:该属性只是用来显示,而在csv数据文件中,必须使用[.] (string) decimal separator. Note, that this is for displaying data only. Decimals in data xml file must be separated with a dot --> <!-- 千位分隔符,默认为空[ ] (string) thousand separator. use "none" if you don't want to separate --> 3 <!-- 如果百分数格式的数字,后面的小数位小于该属性的值,则在小数后面加0补充。如54.2%,该属性设置为3,那么显示的效果为54.200%。[] (Number) if your value has less digits after decimal then is set here, zeroes will be added --> <!--设置科学记数法的最小值 [0.000001] If absolute value of your number is equal or less then scientific_min, this number will be form
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值