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 相关文章推荐
js 获取服务器控件值的代码
Mar 05 Javascript
Javascript 面向对象 继承
May 13 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
javascript解析json格式的数据方法详解
Aug 07 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设计模式 Prototype (原型模式)代码
2011/06/26 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
javascript some()函数用法详解
2014/11/13 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
js动态引入的四种方法
2018/05/05 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
解决VUE双向绑定失效的问题
2019/10/29 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Django返回json数据用法示例
2016/09/18 Python
Python 序列的方法总结
2016/10/18 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
python多任务及返回值的处理方法
2019/01/22 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
北京SQL新华信咨询
2016/09/30 面试题
体育教师工作总结的自我评价
2013/10/10 职场文书
厂长助理岗位职责
2013/12/27 职场文书
银行职员自我鉴定
2014/04/20 职场文书
协议书怎么写
2014/04/21 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
拙作再改《我的收音机情缘》
2022/04/05 无线电
mysql sock文件存储了什么信息
2022/07/15 MySQL