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");
        }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM