今天写页面页面需求到柱状图标，今天介绍一下我所用的Chart.js图表插件

官网：http://www.bootcss.com/p/chart.js/         里面会有下载js文件和中文文档

一、接下来简单说一下用法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="chart.js"></script>

</head>

<body>

<canvas width="500px" height="500px" style="border: 1px solid #000"></canvas>

<script>

    var data = {      //先写data对象 ，如果先写了 new Chart(x),Bar(data) 因为代码的执行顺序，你会发现data还没创建所以获取不到

        labels : ["1","2","3","4","5","6","7","8","9","10","11","12"], //这行意思代表了你那些分类，比如成绩表图下的姓名

        datasets : [       //这个中的写的是分类有多少可以写多少比如成绩表中的语、数、英各科成绩

            {

                fillColor : "rgba(220,220,220,0.5)", //填充rgba颜色，可以根据需求来自定义

                strokeColor : "rgba(220,220,220,1)",  //线条颜色

                pointColor : "rgba(220,220,220,1)",  //点的颜色

                pointStrokeColor : "#fff",        //点的线条颜色

                data : [65,59,90,81,56,55,40,55,65,75,95,77]  //假如这条数据代表了语文成绩，那每个下标和上面相对应的名字就是这个人的语文成绩了。

            },

            {

                fillColor : "rgba(151,187,205,0.5)",

                strokeColor : "rgba(151,187,205,1)",

                pointColor : "rgba(151,187,205,1)",

                pointStrokeColor : "#fff",

                data : [28,48,40,19,96,27,50,12,52,34,37,90]

            }

        ]

    }

    var ca=document.getElementsByTagName("canvas")[0];

    var x=ca.getContext("2d")

        new Chart(x).Line(data);//这个意思是在那个画布中画什么养的图标。

</script>

</body>

</html>

效果

其中分类为6种，他们都是new Chart(获取的画布).Line(数据)：

1、 上边的曲线图

2、柱状图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="chart.js"></script>

</head>

<body>

<canvas width="500px" height="500px" style="border: 1px solid #000"></canvas>

<script>

    var data = {

        labels : ["1","2","3","4","5","6"],

        datasets : [

           	{

			fillColor : "rgba(220,220,220,0.5)", //柱状图不需要小圆点所以只用线条颜色和填充颜色

			strokeColor : "rgba(220,220,220,1)",

			data : [65,59,90,81,56,55,40]

		},

        ]

    }

    var ca=document.getElementsByTagName("canvas")[0];

    var x=ca.getContext("2d")

        new Chart(x).Bar(data); //只需要把Line改为Bar曲线就改为柱状

</script>

</body>

</html>

效果　

这中插件使用后图表会带有各种动画效果，当然也是何以修改的。

其中还有雷达图，饼状图，环形图，极地图，这些大家可以去网站看中文文档。里面比我介绍详细多啦！

canvas的Chart图表插件的更多相关文章

  1. 基于html5 canvas 的强大图表插件【Chart.js】

    名词解释 Chart.js:是基于html5和canvas的强大图表插件,支持多样的图表形式,柱状线性饼环极地雷达等等: canvas:只兼容到IE9 excanvas.js:强大的第三方兼容插件,可 ...

  2. html5 canvas做的图表插件

    用highchart的时候发现它是用svg来画图的,那么用canvas来做怎么样的. 以前做AS图表插件的时候,绘制图画主要用容器的Graphics对象来绘制,而canvas的context和Grap ...

  3. 基于HTML5 Canvas的3D动态Chart图表

    发现现在工业SCADA上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美丽的图表了,然而图表轻易 ...

  4. 9款基于HTML5/SVG/Canvas的折线图表应用

    1.华丽的HTML5图表 可展示实时数据 HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大.这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势 ...

  5. 转-——推荐几个web中常用的一些js图表插件 - zccst

    http://www.tuicool.com/articles/bqq2Qn 作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph f ...

  6. 推荐几个web中常用js图表插件

    作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph flot js charts jqchart elycharts jquery ...

  7. 微信小程序图表插件 - wx-charts

    微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. wx-c ...

  8. js 图表插件 chartjs 2.4

    PS:该图表插件对手机端支持挺好 网上的文章大多数的参数都是老版本的过时的,最新api查看官网http://www.chartjs.org/docs/  下载地址 https://github.com ...

  9. highcharts图表插件初探

    转载请注明出处:http://www.cnblogs.com/liubei/p/highchartsOption.html HighCharts简介 Highcharts 是一个用纯JavaScrip ...

随机推荐

  1. 2016级算法第五次上机-B.Bamboo&APTX4844魔发药水

    Bamboo&APTX4844魔发药水 题意 "于是,Bamboo耐着性子,看巫师从袖子里掏出 M 瓶时光泉水和 K 粒绿色能量.每瓶时光泉水重量为 c ,生发效果为 l:每粒绿色能 ...

  2. [NodeJS]Jenkins-cli

    使用npm 包nestor 触发jenkins job, 达到命令行管理Jenkins功能. 1. install nestor : npm install -g nestor 2. set JENK ...

  3. Springboot第二篇：与前端fetch通信（附springboot解决跨域方法）

    说到与前端通信,明白人都知道这章肯定会写两部分的东西啦. 关于后台 ①首先回顾前文,上一章环境搭建如图: ②我们在maven.example.controller下添加一个文件,并附上如图代码: ③: ...

  4. CDQZ Day5

    1DP #1题目名称 题目名称匹配块路径染色输入文件名 输入文件名match.in.in.inblock.inpath.inpaint.in输出文件名 输出文件名match.out.out.out.o ...

  5. C语言字符串的操作

    C语言字符串操作函数 1. 字符串反转 - strRev2. 字符串复制 - strcpy3. 字符串转化为整数 - atoi4. 字符串求长 - strlen5. 字符串连接 - strcat6. ...

  6. Vmtools的安装步骤

    目的:实现win和centos之间的相互复制功能 1.进入centos 2.点击vm菜单的->虚拟机->安装VMware Tools 3.centos会出现一个vm的安装包 4.将文件移动 ...

  7. oracle mysql的序列的新增、删除、修改及使用

    序列的使用  参考文献: https://blog.csdn.net/meijory/article/details/51891529 1.序列介绍 序列: 是 oracle 提供的用于产生一系列唯一 ...

  8. EntityFramework6 版本更变产生的错误

    LINQ to Entities does not recognize the method 'System.Nullable`1[System.Int32] DiffMinutes(System.N ...

  9. TOJ 1836 Play on Words

    描述 Some of the secret doors contain a very interesting word puzzle. The team of archaeologists has t ...

  10. SQL Cookbook—插入、更新与删除

    涉及到的问题–1.从一个表向另外的表中复制行–2.复制表定义(包含表记录)–3.一次向多个表中插入记录–4.–5.当相应行存在时更新–6.用其他表中的值更新–7.删除违反参照完整性的记录 –1.从一个 ...