Bootstrap Chart组件使用教程


Posted in Javascript onApril 28, 2016

Bootstrap是由前Twitter设计师Mark Otto和Jacob Thornton开发的前端工具包,其提供了优雅的HTML和CSS规范。Bootstrap不单单是一个框架,更确切的说,它改变了整个游戏规则。该框架使得许多应用和网站的设计开发变得简便许多,而且它将大量的HTML框架普及成了产品。

图表组件Chart.js是Bootstrap比较好用的组件之一,与一款收费的组件highchart类似,效果上来看免费与收费的产品相差还是有一点点的,不过功能上差不多能满足我们项目的需要。下面这段JS脚本主要是为了方便生成一个图表的配置而写的方法

/**
* 获取一个新的chart配置项
* @param color rgba颜色
* @param type 图表类型:line,bar,radar,polarArea,pie,doughnut
* @param title 显示图表的标题
* @param label 图表的标签,鼠标移到图表某个数据点时显示的提示文字
* @param categories 一般是X轴的内容
* @param data 一般是Y轴的数据
* @returns 返回图表的配置参数
*/
function getNewConfig(color,type,title,label,categories,data)
{
var background = color;
var config = {
type: type,
options: {
responsive: true,
legend: {
display: false,
position:'bottom'
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Value'
}
}]
},
title: {
display: true,
text: title
}
}
};
var dataset = {
label: label,
data: data,
fill: false,
borderDash: [, ],
borderColor : background,
backgroundColor : background,
pointBorderColor : background,
pointBackgroundColor : background,
pointBorderWidth : 
};
var data = {
labels:categories,
datasets: [dataset]
};
config.data = data;
return config;
}

调用方法:

<canvas id="chart_weixinmember" height=""></canvas> 
var color = 'rgba(,,,.)';
var categories = ["--","--","--","--","--","--","--"];
var data = [,,,,,,];
var config = getNewConfig(color,'line','最近天微信会员增长情况','当天新增微信会员',categories,data);
var ctx = document.getElementById("chart_weixinmember").getContext("d");
var weixinMemberCountChart = new Chart(ctx, config);

显示的效果:

Bootstrap Chart组件使用教程

说明:使用上面的代码需要引用Chart.js,

Chart中文网站以及文档:

http://www.bootcss.com/p/chart.js/

http://www.bootcss.com/p/chart.js/docs/​

Chart英文网站及文档:

www.chartjs.org​

www.chartjs.org/docs​

Javascript 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
javascript解析json数据的3种方式
May 08 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 #Javascript
location.hash保存页面状态的技巧
Apr 28 #Javascript
字符串反转_JavaScript
Apr 28 #Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 #Javascript
基于BootStarp的Dailog
Apr 28 #Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 #Javascript
JavaScript 消息框效果【实现代码】
Apr 27 #Javascript
You might like
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php-app开发接口加密详解
2018/04/18 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
Python3分析处理声音数据的例子
2019/08/27 Python
python如何获取apk的packagename和activity
2020/01/10 Python
python机器学习库xgboost的使用
2020/01/20 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python 中如何写注释
2020/08/28 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
python 实现aes256加密
2020/11/27 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
酒店管理专业自荐信
2014/05/23 职场文书
党员承诺书格式范文
2015/04/28 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫