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="panelsH.........完整代码请登录后点击上方下载按钮下载查看
网友评论0