amcharts可缩放区域曲线图表显示效果-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：amcharts可缩放区域曲线图表显示效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        #options {
            width: 100%;
            margin: 10;
        }

        #chartdiv {
            width: 100%;
            height: 400px;
        }

        #chartdivTwo {
            width: 50%;
            height: 400px;
        }

        .amcharts-graph-g2 .amcharts-graph-stroke {
            stroke-dasharray: 500%;
            -webkit-animation: css-effect 10s ease-out forwards;
            animation: css-effect 10s ease-out forwards;
        }

@-webkit-keyframes css-effect {
            0% {
                stroke-dashoffset: 500%;
            }
            100% {
                stroke-dashoffset: 0%;
            }
        }
@keyframes css-effect {
            0% {
                stroke-dashoffset: 500%;
            }
            100% {
                stroke-dashoffset: 0%;
            }
        }

        .modal, .modal .shade {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100000;
        }

        .modal .shade {
            background: #000;
            opacity: 0.7;
            z-index: 1;
        }

        .modal .chart {
            width: 90%!important;
            height: 90%!important;
            top: 5%;
            left: 5%;
            position: absolute;
            background: #fff!important;
            z-index: 2;
            border-radius: 5px;
        }
    </style>



    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/jquery.fancybox.css">
    <link rel="stylesheet" href="https://extra.amcharts.com/support/ameffects.css">
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-serial.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-light.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-radar.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-export.min.js"></script>
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/amcharts-export.css">
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery.fancybox.min.js"></script>
</head>
<body>
    <div>
        <div id="options"></div>
        <div id="contentBox" style="margin:0px auto; width:100">
        </div>
    </div>


    <script>
        var charID = document.getElementById('contentBox');
        charID.innerHTML = '<div id="chartdiv"></div>';

        var mainConfig = {
            "type": "serial",
            "theme": "light",
            "marginRight": 30,
            "marginLeft": 30,
            "legend": {
                "verticalGap": 10,
                "maxColumns": 1,
                "position": "top",
                "useGraphSettings": true,
                "markerSize": 8,
                "align": "center"
            },

            "autoMarginOffset": 20,
            "mouseWheelZoomEnabled": true,
            "dataDateFormat": "YYYY-MM-DD",
            "valueAxes": [{
                "id": "v1",
                "axisAlpha": 0,
                "position": "left",
                "ignoreAxisWidth": true
            }],

            "balloon": {
                "borderThickness": 1,
                "shadowAlpha": 0
            },

            "graphs": [{
                "id": "g1",
                "balloon": {
                    "drop": true,
                    "adjustBorderColor": false,
                    "color": "#ffffff",
                    "fontSize": 10,
                    "maxWidth": 40
                },

                "bullet": "round",
                "bulletBorderAlpha": 1,
                "bulletColor": "#FFFFFF",
                "bulletSize": 5,
                "hideBulletsCount": 50,
                "lineThickness": 2,
                "title": "Worthington",
                "useLineColorForBulletBorder": true,
                "valueField": "value",
                "showHandOnHover": true,
                "balloonText": "<span>Revenue: [[value]]</span>"
            }],

            "chartScrollbar": {
                "graph": "g1",
                "oppositeAxis": false,
                "offset": 30,
                "scrollbarHeight": 80,
                "backgroundAlpha": 0,
                "selectedBackgroundAlpha": 0.1,
                "selectedBackgroundColor": "#888888",
                "graphFillAlpha": 0,
                "graphLineAlpha": 0.5,
                "selectedGraphFillAlpha": 0,
                "selectedGraphLineAlpha": 1,
                "autoGridCount": true,
                "color": "#AAAAAA"
            },

            "chartCursor": {
                "pan": true,
                "valueLineEnabled": true,
                "valueLineBalloonEnabled": true,
                "cursorAlpha": 1,
                "cursorColor": "#258cbb",
                "limitToGraph": "g1",
                "valueLineAlpha": 0.2,
                "valueZoomable": true
            },

            "valueScrollbar": {
                "oppositeAxis": false,
                "offset": 50,
                "scrollbarHeight": 10
            },

            "categoryField": "date",
            "categoryAxis": {
                "parseDates": true,
                "dashLength": 1,
                "minorGridEnabled": true
            },

            "export": {
                "enabled": true
            },

            "dataProvider": [{
                "date": "2012-07-27",
                "value": 13
            },
                {
                    "date": "2012-07-28",
                    "value": 11
                },
                {
                    "date": "2012-07-29",
                    "value": 15
                },
                {
                    "date": "2012-07-30",
                    "value": 16
                },
                {
                    "date": "2012-07-31",
                    "value": 18
                },
                {
                    "date": "2012-08-01",
                    "value": 13
                },
                {
                    "date": "2012-08-02",
                    "value": 22
                },
                {
                    "date": "2012-08-03",
                    "value": 23
                },
                {
       .........完整代码请登录后点击上方下载按钮下载查看