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 相关文章推荐
jquery中eq和get的区别与使用方法
Apr 14 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
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
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
化学实验员岗位职责
2013/12/28 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
四年级数学教学反思
2014/02/02 职场文书
投资意向书
2014/07/30 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
mysqldump进行数据备份详解
2022/07/15 MySQL