chart实现动态柱状图上下起伏动画效果代码-html代码-BFW代码库

chart实现动态柱状图上下起伏动画效果代码

代码语言：html

所属分类：图表

代码描述：chart实现动态柱状图上下起伏动画效果代码

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

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


</head>
<body>
<!-- partial:index.partial.html -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chart.js"></script>
<canvas id="chart"></canvas>
<button id="update-chart">Update Chart</button>
<!-- partial -->
  <script  >
      const chartCanvas = document.getElementById('chart');
const ctx = chartCanvas.getContext('2d');

const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)'],
      borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)'],
      borderWidth: 1,
    },
  ],
};

const options = {
  animation: {
    duration: 2000, // Animation duration in milliseconds
  },
    plugins: {
    annotation: {
      annotations: [],
    },
  },
};


const chart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options,
});


// Add annotations to display time.........完整代码请登录后点击上方下载按钮下载查看