amcharts点线图连线动画效果-html代码-BFW代码库

amcharts点线图连线动画效果

代码语言：html

所属分类：图表

代码描述：amcharts点线图连线动画效果

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

<!DOCTYPE html>
<html>
<head>
<style>
#chartdiv{
  width: 100%;
  height: 500px;
}

.amcharts-graph-AmGraph-2 {
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 500%;
  stroke-dasharray: 0 /;    /* fixes IE prob */
  stroke-dashoffset: 0 /;   /* fixes IE prob */
  -webkit-animation: am-draw 30s;
  animation: am-draw 30s;
}

@keyframes am-draw {
    0% {
        stroke-dashoffset: 500%;
    }
    100% {
        stroke-dashoffset: 0%;
    }
}

@-webkit-keyframes am-draw {
    0% {
        stroke-dashoffset: 500%;
    }
    100% {
        stroke-dashoffset: 0%;
    }
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes flickerIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.amcharts-category-axis, .amcharts-value-axis, .amcharts-plot-area-left, #description, .amcharts-graph-column, .amcharts-graph-AmGraph-1 {
  opacity: 0;
  -webkit-animation: fadeIn 1.5s ease-in 1 forwards;
  -moz-animation:    fadeIn 1.5s ease-in 1 forwards;
  -o-animation:      fadeIn 1.5s ease-in 1 forwards;
  animation:         fadeIn 1.5s ease-in 1 forwards;
}

/* .amcharts-category-axis, .amcharts-plot-area-bottom {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
} */
</style>

<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">
			AmCharts.makeChart("chartdiv",
				{
					"type": "serial",
					"categoryField": "category",
					"startDuration": 0,
          "addClassNames": true,
					"categoryAxis": {
						"axisThickness": 0,
						"color": "#333333",
						"dashLength": 5,
						"gridAlpha": 0.11,
						"tickLength": 0
					},
					"chartCursor": {
						"enabled": true,
						"bulletsEnabled": true,
						"bulletSize": 20,
						"categoryBalloonColor": "#FCD6A9",
						"color": "#000000",
						"cursorColor": "#FCD6A9",
						"graphBulletAlpha": 0,
						"graphBulletSize": 0,
						"selectionAlpha": 0,
						"selectWithoutZooming": true,
						"valueLineAlpha": 0,
						"zoomable": false
					},
					"trendLines": [],
					"graphs": [
						{
							"balloonColor": "#FCD6A9",
							"bullet": "round",
							"bulletBorderAlpha": 1,
							"bulletBorderColor": "RGBA(144, 19, 254, 0.68)",
							"bulletBorderThickness": 1,
							"bulletColor": "#FFFFFF",
							"bulletSize": 5,
							"color": "",
							"dashLength": 8,
							"fillColors": "",
							"id": "AmGraph-1",
							"lineColor": "RGBA(144, 19, 254, 0.68)",
							"title": "Предыдущий год",
							"topRadius": 0,
							"type": "smoothedLine",
							"valueField": "column-1"
						},
						{
							"balloonColor": "#FCD6A9".........完整代码请登录后点击上方下载按钮下载查看