图表组件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: [5, 5],
         borderColor : background,
         backgroundColor : background,
         pointBorderColor : background,
         pointBackgroundColor : background,
         pointBorderWidth : 1
       };
       var data =  {
         labels:categories,
         datasets: [dataset]
       };
       config.data = data;
       return config;
     }

调用方法:

<canvas id="chart_weixinmember" height="100"></canvas>
         var color = 'rgba(51,126,255,0.5)';
         var categories = ["2016-04-22","2016-04-23","2016-04-24","2016-04-25","2016-04-26","2016-04-27","2016-04-28"];
         var data = [0,0,0,0,1,0,0];
         var config = getNewConfig(color,'line','最近7天微信会员增长情况','当天新增微信会员',categories,data);
         var ctx = document.getElementById("chart_weixinmember").getContext("2d");
         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​

Bootstrap Chart组件使用分享的更多相关文章

  1. JS组件系列——Bootstrap Select2组件使用小结

    前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...

  2. AngularJs的UI组件ui-Bootstrap分享(一)

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

  3. AngularJs的UI组件ui-Bootstrap分享(十四)——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

  4. AngularJs的UI组件ui-Bootstrap分享(十三)——Progressbar

    进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...

  5. AngularJs的UI组件ui-Bootstrap分享(十二)——Rating

    Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...

  6. AngularJs的UI组件ui-Bootstrap分享(十一)——Typeahead

    Typeahead指令是一个用于智能提示或自动完成的控件,就像Jquery的AutoComplete控件一样.来看一个最简单的例子: <!DOCTYPE html> <html ng ...

  7. AngularJs的UI组件ui-Bootstrap分享(十)——Model

    Model是用来创建模态窗口的,但是实际上,并没有Model指令,而只有$uibModal服务,创建模态窗口是使用$uibModal.open()方法. 创建模态窗口时,要有一个模态窗口的模板和对应的 ...

  8. AngularJs的UI组件ui-Bootstrap分享(九)——Alert

    alert指令会在页面上显示一条提示消息,效果是这样: 代码为: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" ...

  9. AngularJs的UI组件ui-Bootstrap分享(八)——Tooltip和Popover

    tooltip和popover是轻量的.可扩展的.用于提示的指令.对于移动端来讲,这两个指令虽然可以正常工作,但是从用户体验的角度并不推荐使用. 先说tooltip,tooltip有三种使用方式: ( ...

随机推荐

  1. Vue.js&mdash;&mdash;60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  2. Mac Pro 编译安装 Redis-3.2.3

    Redis官方下载地址:http://redis.io/download Redis安装 cd /usr/local/src/redis-3.2.3 sudo make sudo make insta ...

  3. Bootstrap整体架构

    大多数Bootstrap的使用者都认为Bootstrap只是提供了CSS组件和JavaScript插件,其实CSS组件和JavaScript插件只是Bootstrap框架的表现形式而已,他们都是构建在 ...

  4. java之对象转型

    对象转型(casting) 1.一个基类的引用类型变量可以“指向”其子类的对象. 2.一个基类的引用不可以访问其子类对象新增加的成员(属性和方法). 3.可以使用 引用变量 instanceof 类名 ...

  5. ios-XML文档解析之SAX解析

    首先SAX解析xml *xml文档的格式特点是节点,大体思路是把每个最小的子节点作为对象的属性,每个最小子节点的'父'节点作为对象,将节点转化为对象,输出. 每个节点都是成对存在的,有开始有结束.有始 ...

  6. Linux How to add a new disk to LVM

    转自:http://blog.itpub.net/7191998/viewspace-772060/ 1.check old diskspace and device listdf -halfree ...

  7. 手把手教你玩转Git分布式版本控制系统!

    目录 Git诞生历史 Git环境准备 Git安装部署 Git常用命令 Git基本操作 Git管理分支结构 Git管理标签 GitLab安装部署 GitHub托管服务 Git客户端工具 1 Git诞生历 ...

  8. 源码-hadoop1.1.0-core-org.apache.hadoop

    按包的顺序类的顺序来吧,因为我不懂hadoop类的具体体系和类之间的联系,如果有一定知识积累的可以看下别人写的hadoop源码解读类的书,类似的有 http://pan.baidu.com/s/1i3 ...

  9. Centos 6.5编译安装Nginx+php+Mysql

    说明: 操作系统:CentOS 6.5 64位 准备篇: 一.配置好IP.DNS .网关,确保使用远程连接工具能够连接服务器 二.配置防火墙,开启80端口.3306端口 vi /etc/sysconf ...

  10. 获取局域网ip

    显然不可使用基于request请求的request.getRemoteAddr()这个是获取广域网内的服务器地址,比如我请求百度使用这个方法就可以获取到百度的服务器地址 那么InetAddress的I ...