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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
Mootools 1.2教程 Tooltips
Sep 15 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
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
global.php
2006/12/09 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
Python实现简单的四则运算计算器
2016/11/02 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
初中运动会前导词
2015/07/20 职场文书
职工的安全责任书范文!
2019/07/02 职场文书