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..........完整代码请登录后点击上方下载按钮下载查看