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 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
js中call与apply的用法小结
Dec 28 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 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
PHP生成随机密码类分享
2014/06/25 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
一个实用的php验证码类
2017/07/06 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
Python中的字典与成员运算符初步探究
2015/10/13 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
不可错过的十本Python好书
2017/07/06 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
大学生军训感想
2014/02/16 职场文书
语文教学随笔感言
2014/02/18 职场文书
广告语设计及教案
2014/03/21 职场文书
关于读书的演讲稿
2014/05/07 职场文书
绿色环保演讲稿
2014/05/10 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS