Bootstrap Chart组件使用教程

 更新时间:2016年04月28日 11:14:50   作者:贤勇  
图表组件Chart.js是Bootstrap比较好用的组件之一,与一款收费的组件highchart类似,效果上来看免费与收费的产品相差还是有一点点的,不过功能上差不多能满足我们项目的需要,本文给大家介绍Bootstrap Chart组件使用,需要的朋友参考下吧

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); 

显示的效果:

说明:使用上面的代码需要引用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

相关文章

  • DOM3中的js textInput文本事件

    DOM3中的js textInput文本事件

    DOM3中引入了文本事件,其中之一 textInput 。当用户再可编辑区域输入字符时触发该事件。
    2011-04-04
  • javascript中Date format(js日期格式化)方法小结

    javascript中Date format(js日期格式化)方法小结

    这篇文章主要介绍了javascript中Date format,即js日期格式化的方法.实例总结了三种常见的JavaScript日期格式化技巧,需要的朋友可以参考下
    2015-12-12
  • JavaScript仿京东轮播图效果

    JavaScript仿京东轮播图效果

    这篇文章主要为大家详细介绍了JavaScript仿京东轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • echarts实现晶体球面投影的实例教程

    echarts实现晶体球面投影的实例教程

    这篇文章主要给大家介绍了关于echarts实现晶体球面投影的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 使用flow来规范javascript的变量类型

    使用flow来规范javascript的变量类型

    这篇文章主要介绍了使用flow来规范javascript的变量类型,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 老生常谈javascript的面向对象思想

    老生常谈javascript的面向对象思想

    下面小编就为大家带来一篇老生常谈javascript的面向对象思想。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 详解JavaScript正则表达式之RegExp对象

    详解JavaScript正则表达式之RegExp对象

    这篇文章主要介绍了JavaScript正则表达式之RegExp对象,对RegExp对象的基本使用方法,以及各种方法进行整理,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 详解ES6 export default 和 import语句中的解构赋值

    详解ES6 export default 和 import语句中的解构赋值

    这篇文章主要介绍了详解ES6 export default 和 import语句中的解构赋值,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • canvas绘制爱心的几种方法总结(推荐)

    canvas绘制爱心的几种方法总结(推荐)

    下面小编就为大家带来一篇canvas绘制爱心的几种方法总结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JavaScript判断密码强度(自写代码)

    JavaScript判断密码强度(自写代码)

    网站注册的时候经常可以看到密码强度提示,今天自己做了一个JS密码强度判断,具体实现如下,喜欢的朋友可以学习下
    2013-09-09

最新评论