图表组件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. Python 环境搭建,开发工具,基本语法

    python环境 https://www.python.org/downloads/ 现在pthon有两个版本 一个是3.5系列的 , 一个是2.7系列的.建议用3.5版本的 开发工具 PyCharm ...

  2. JavaScript学习09 函数本质及Function对象深入探索

    JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...

  3. stanford coursera 机器学习编程作业 exercise 5(正则化线性回归及偏差和方差)

    本文根据水库中蓄水标线(water level) 使用正则化的线性回归模型预 水流量(water flowing out of dam),然后 debug 学习算法 以及 讨论偏差和方差对 该线性回归 ...

  4. java.lang.String

    1.String 是一个类,广泛应用于 Java 程序中,相当于一系列的字符串.在 Java 语言中 strings are objects.创建一个 strings 最直接的方式是 String g ...

  5. JDK里的设计模式

    一.Creational patterns 创建模式 Abstract factory (recognizeable by creational methods returning the facto ...

  6. solr学习之添加文档

    一.开篇语 其实Solr就是一个你可以通过他来查询文档的东西,他整个都是基于Document的,那么这些Document从何而来列?  当然是我们给他,而这些来源就包括了:数据库文件,XML,Json ...

  7. Command-line tools can be 235x faster than your Hadoop cluster

    原文链接:http://aadrake.com/command-line-tools-can-be-235x-faster-than-your-hadoop-cluster.html Introduc ...

  8. HDOJ 1020 Encoding

    Problem Description Given a string containing only 'A' - 'Z', we could encode it using the following ...

  9. Ibatis ISqlMapper工厂类案例

    namespace Model{ public class MapperFactory { //声明一个ISqlMapper接口类型的数据映射器 _mapper,其初始值为null private s ...

  10. Turn the corner

    Turn the corner Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...