1. 程式人生 > >amcharts的一些用法

amcharts的一些用法

das mark logs legend data 數據 網格線 var col

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

amcharts的一些用法