bootstrap+chart实现自适应响应式图表效果代码
代码语言：html
所属分类：响应式
代码描述：bootstrap+chart实现自适应响应式图表效果代码
代码标签： 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="panelsHeadingFive">
<button class="accordion-button mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#panelsCollapseFive" aria-expanded="true" aria-controls="panelsCollapseFive">
<p class="m-0 p-0 fw-bold fs-5">Multi-Axis Line Graph</p>
</button>
</h2>
<div id="panelsCollapseFive" class="accordion-collapse collapse show" aria-labelledby="panelsHeadingFive">
<p class="chart-title text-center fw-bold fs-5 ps-3 pe-3">Course creation vs Enrollment </p>
<div class="d-flex justify-content-center align-items-center">
<div class="chart-container mb-4 ps-3 pe-3">
<canvas id="chartThree"></canvas>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsHeadingSix">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsCollapseSix" aria-expanded="false" aria-controls="panelsCollapseSix">
<p class="p-0 m-0 fw-bold fs-5">Usage</p>
</button>
</h2>
<div id="panelsCollapseSix" class="accordion-collapse collapse" aria-labelledby="panelsHeadingSix">
<div class="accordion-body">
<p>A line grap, also known as a line plot or a line chart, is a graph that uses lines to connect individual data points. A line graph displays quantitative values over a specified time interval. Line graphs use data point "markers," which are connected by straight lines. While line graphs are used across many different fields for different purposes, they are especially helpful when it is necessary to create a graphical depiction of changes in values over time.</p>
</div>
</div>
</div>
</div>
<div class="hr-line mt-4 mb-4"></div>
<!--Polar Chart -->
<div class="accordion mb-3 p-3" id="chartAccordionOne">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsHeadingOne">
<button class="accordion-button mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#panelsCollapseOne" aria-expanded="true" aria-controls="panelsCollapseOne">
<p class="m-0 p-0 fw-bold fs-5">Polar Chart</p>
</button>
</h2>
<div id="panelsCollapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsHeadingOne">
<p class="chart-title text-center fw-bold fs-5 ps-3 pe-3">Average daily social media use in the USA (min)</p>
<div class="d-flex justify-content-center align-items-center">
<div class="chart-container mb-4">
<canvas id="chartOne"></canvas>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsHeadingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsCollapseTwo" aria-expanded="false" aria-controls="panelsCollapseTwo">
<p class="p-0 m-0 fw-bold fs-5">Usage</p>
</button>
</h2>
<div id="panelsCollapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsHeadingTwo">
<div class="accordion-body">
<p>The polar area diagram is similar to a usual pie chart, except sectors have equal angles and differ rather in how far each sector extends from the center of the circle. The first known use of polar area diagrams was by André-Michel Guerry, which he called courbes circulaires (circular curves), in an 1829 paper showing seasonal and daily variation in wind direction over the year and births and deaths by hour of the day.</p>
</div>
</div>
</div>
</div>
<div class="hr-line mt-4 mb-4"></div>
<!--Radar Chart -->
<div class="accordion p-3" id="chartAccordionTwo">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
<button class=".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0