amcharts实现多个柱状图对比显示效果-html代码-BFW代码库

amcharts实现多个柱状图对比显示效果

代码语言：html

所属分类：图表

代码描述：amcharts实现多个柱状图对比显示效果

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

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

<style>
/**
 * Generic styles
*/
body {
  font-family: Verdana;
  font-size: 14px;
}
#chartdiv {
	width: 100%;
	height: 435px;
}

/**
 * Define animations
 */

@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; }
}

/**
 * Apply animations to various elements
 */

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

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

.amcharts-value-axis, amcharts-plot-area-left {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s;
}

.amcharts-graph-column.amcharts-graph-g2 {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;
}

.amcharts-graph-column.amcharts-graph-g1 {
  -webkit-animation-delay: 6.5s;
  -moz-animation-delay: 6.5s;
  -o-animation-delay: 6.5s;
  animation-delay: 6.5s;
}

#description {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
  padding: 10px 30px;
  background: #eee;
  margin: 20px;
}
</style>

</head>
<body translate="no">

<div id="chartdiv"></div>


<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 >
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "addClassNames": true,
.........完整代码请登录后点击上方下载按钮下载查看