amcharts可缩放区域曲线图表显示效果
代码语言：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
},
{
"date": "2012-08-04",
"value": 20
},
{
"date": "2012-08-05",
"value": 17
},
{
"date": "2012-08-06",
"value": 16
},
{
"date": "2012-08-07",
"value": 18
},
{
"date": "2012-08-08",
"value": 21
},
{
"date": "2012-08-09",
"value": 26
},
{
"date": "2012-08-10",
"value": 24
},
{
"date": "2012-08-11",
"value": 29
},
{
"date": "2012-08-12",
"value": 32
},
{
"date": "2012-08-13",
"value": 18
},
{
"date": "2012-08-14",
"value": 24
},
{
"date": "2012-08-15",
"value": 22
},
{
"date": "2012-08-16",
"value": 18
},
{
"date": "2012-08-17",
"value": 19
},
{
"date": "2012-08-18",
"value": 14
},
{
"date": "2012-08-19",
"value": 15
},
{
"date": "2012-08-20",
"value": 12
},
{
"date": "2012-08-21",
"value": 8
},
{
"date": "2012-08-22",
"value": 9
},
{
"date": "2012-08-23",
"value": 8
},
{
"date": "2012-08-24",
"value": 7
},
{
"date": "2012-08-25",
"value": 5
},
{
"date": "2012-08-26",
"value": 11
},
{
"date": "2012-08-27",
"value": 13
},
{
"date": "2012-08-28",
"value": 18
},
{
"date": "2012-08-29",
"value": 20
},
{
"date": "2012-08-30",
"value": 29
},
{
"date": "2012-08-31",
"value": 33
},
{
"date": "2012-09-01",
"value": 42
},
{
"date": "2012-09-02",
"value": 35
},
{
"date": "2012-09-03",
"value": 31
},
{
"date": "2012-09-04",
"value": 47
},
{
"date": "2012-09-05",
"value": 52
},
{
"date": "2012-09-06",
"value": 46
},
{
"date": "2012-09-07",
"value": 41
},
{
"date": "2012-09-08",
"value": 43
},
{
"date": "2012-09-09",
"value": 40
},
{
"date": "2012-09-10",
"value": 39
},
{
"date": "2012-09-11",
"value": 34
},
{
"date": "2012-09-12",
"value": 29
},
{
"date": "2012-09-13",
"value": 34
},
{
"date": "2012-09-14",
"value": 37
},
{
"date": "2012-09-15",
"value": 42
},
{
"date": "2012-09-16",
"value": 49
},
{
"date": "2012-09-17",
"value": 46
},
{
"date": "2012-09-18",
"value": 47
},
{
"date": "2012-09-19",
"value": 55
},
{
"date": "2012-09-20",
"value": 59
},
{
"date": "2012-09-21",
"value": 58
},
{
"date": "2012-09-22",
"value": 57
},
{
"date": "2012-09-23",
"value": 61
},
{
"date": "2012-09-24",
"value": 59
},
{
"date": "2012-09-25",
"value": 67
},
{
"date": "2012-09-26",
"value": 65
},
{
"date": "2012-09-27",
"value": 61
},
{
"date": "2012-09-28",
"value": 66
},
{
"date": "2012-09-29",
"value": 69
},
{
"date": "2012-09-30",
"value": 71
},
{
"date": "2012-10-01",
"value": 67
},
{
"date": "2012-10-02",
"value": 63
},
{
"date": "2012-10-03",
"value": 46
},
{
"date": "2012-10-04",
"value": 32
},
{
"date": "2012-10-05",
"value": 21
},
{
"date": "2012-10-06",
"value": 18
},
{
"date": "2012-10-07",
"value": 21
},
{
"date": "2012-10-08",
"value": 28
},
{
"date": "2012-10-09",
"value": 27
},
{
"date": "2012-10-10",
"value": 36
},
{
"date": "2012-10-11",
"value": 33
},
{
"date": "2012-10-12",
"value": 31
},
{
"date": "2012-10-13",
"value": 30
},
{
"date": "2012-10-14",
"value": 34
},
{
"date": "2012-10-15",
"value": 38
},
{
"date": "2012-10-16",
"value": 37
},
{
"date": "2012-10-17",
"value": 44
},
{
"date": "2012-10-18",
"value": 49
},
{
"date": "2012-10-19",
"value": 53
},
{
"date": "2012-10-20",
"value": 57
},
{
"date": "2012-10-21",
"value": 60
},
{
"date": "2012-10-22",
"value": 61
},
{
"date": "2012-10-23",
"value": 69
},
{
"date": "2012-10-24",
"value": 67
},
{
"date": "2012-10-25",
"value": 72
},
{
"date": "2012-10-26",
"value": 77
},
{
"date": "2012-10-27",
"value": 75
},
{
"date": "2012-10-28",
"value": 70
},
{
"date": "2012-10-29",
"value": 72
},
{
"date": "2012-10-30",
"value": 70
},
{
"date": "2012-10-31",
"value": 72
},
{
"date": "2012-11-01",
"value": 73
},
{
"date": "2012-11-02",
"value": 67
},
{
"date": "2012-11-03",
"value": 68
},
{
"date": "2012-11-04",
"value": 65
},
{
"date": "2012-11-05",
"value": 71
},
{
"date": "2012-11-06",
"value": 75
},
{
"date": "2012-11-07",
"value": 74
},
{
"date": "2012-11-08",
"value": 71
},
{
"date": "2012-11-09",
"value": 76
},
{
"date": "2012-11-10",
"value": 77
},
{
"date": "2012-11-11",
"value": 81
},
{
"date": "2012-11-12",
"value": 83
},
{
"date": "2012-11-13",
"value": 80
},
{
"date": "2012-11-14",
"value": 81
},
{
"date": "2012-11-15",
"value": 87
},
{
"date": "2012-11-16",
"value": 82
},
{
"date": "2012-11-17",
"value": 86
},
{
"date": "2012-11-18",
"value": 80
},
{
"date": "2012-11-19",
"value": 87
},
{
"date": "2012-11-20",
"value": 83
},
{
"date": "2012-11-21",
"value": 85
},
{
"date": "2012-11-22",
"value": 84
},
{
"date": "2012-11-23",
"value": 82
},
{
"date": "2012-11-24",
"value": 73
},
{
"date": "2012-11-25",
"value": 71
},
{
"date": "2012-11-26",
"value": 75
},
{
"date": "2012-11-27",
"value": 79
},
{
"date": "2012-11-28",
"value": 70
},
{
"date": "2012-11-29",
"value": 73
},
{
"date": "2012-11-30",
"value": 61
},
{
"date": "2012-12-01",
"value": 62
},
{
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0