zoukankan      html  css  js  c++  java
  • 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");
            }
  • 相关阅读:
    Scrum敏捷开发中的各种会议到底怎么开?
    敏捷的方法与误区
    原创:分享封装好的面向JAVA的memcached客户端操作类
    ReactRouter路由配置
    脚手架创建react项目
    React基础知识
    Fetch请求
    redux学习笔记
    npm install常用用法
    python3+selenium3自动化8——当click事件失效,如何解决 测试
  • 原文地址:https://www.cnblogs.com/Strive-count/p/7162715.html
Copyright © 2011-2022 走看看