前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例

最新推荐文章于 2023-07-04 18:54:45 发布

转载

最新推荐文章于 2023-07-04 18:54:45 发布 · 9.3k 阅读

11 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tangan/p/5761778.html

文章标签：

#javascript #前端 #数据库 #ViewUI

本文介绍了如何利用Bootstrap框架结合不同的图表库（如Sparkline、Easy Pie Chart和Flot）在前端创建柱状图、饼状图和折线图。通过示例代码展示了如何在网页中展示数据统计图表，包括设置viewport元标签以适应移动设备，以及通过Ajax获取并展示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。因此，请在使用 Bootstrap 项目的开头包含下面的代码段。

<!DOCTYPE html>
<html>
....
</html>

Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

介绍了这么多，言归正传，下面介绍图：
首先要引入bootstrap的js库，包括柱状图，饼状图和折线图：

<script src="assets/js/charts/sparkline/jquery.sparkline.js"></script>
<script src="assets/js/charts/sparkline/sparkline-init.js"