bootstrap+chart实现自适应响应式图表效果代码-html代码-BFW代码库

bootstrap+chart实现自适应响应式图表效果代码

代码语言：html

所属分类：响应式

代码描述：bootstrap+chart实现自适应响应式图表效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.5.3.0.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chart.umd.4.4.1.js"></script>


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

  
  
  
<style>
body {
  fobt-family: Poppins;
}

.accordion {
  margin: 0 auto;
  min-width: 300px;
  max-width: 640px;
}

.hr-line {
  border-top: 1px solid transparent;
  background: linear-gradient(white, white) padding-box, linear-gradient(90deg, White, DimGrey, White) border-box;
}

.chart-container {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 320px;
  min-width: 320px;
}

#chartOne, #chartTwo {
 width: 100% !important;
 height: 100% !important;
}

.chart-title {
  color: DimGrey;
}

.accordion {
  --bs-accordion-border-width: 0px;
}

.accordion-button {
  color: DimGrey;
  background-color: Whitesmoke !important;
  border-radius: 0px !important;
}

.accordion-button:not(.collapsed) {
  background-color: LightSkyBlue !important;
  color: White !important;
}

.accordion-button:not(.collapsed):after {
  filter: invert(100%) brightness(200%);
}

button p {
  width: 100%; 
  text-align: center !important
}
</style>


  
  
</head>

<body translate="no">
  <h4 class="fw-bold text-center mt-2"><i class="fa-solid fa-square-poll-vertical fa-lg mt-5 me-2"></i>Charts JS</h4>
<div class="hr-line mt-4 mb-4"></div>

<!--Line Graph -->

<div class="accordion mb-3 p-3" id="chartAccordionThree">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsHead.........完整代码请登录后点击上方下载按钮下载查看