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

最新推荐文章于 2024-06-07 10:28:47 发布

weixin_34067049

最新推荐文章于 2024-06-07 10:28:47 发布

阅读量9.1k

点赞数 1

文章标签： javascript 前端数据库 ViewUI

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

版权

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"></script>

<script src="assets/js/charts/easypiechart/j

最低0.47元/天解锁文章

weixin_34067049

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。因此，请在使用 Bootstrap 项目的开头包含下面的代码段。<...
复制链接

扫一扫