今天写页面页面需求到柱状图标，今天介绍一下我所用的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. 51 Nod 1067 博弈 SG函数

    1067 Bash游戏 V2 1 秒 131,072 KB 10 分 2 级题   有一堆石子共有N个.A B两个人轮流拿,A先拿.每次只能拿1,3,4颗,拿到最后1颗石子的人获胜.假设A B都非常聪 ...

  2. [BZOJ 4857][Jsoi2016]反质数序列

    传送门 $ \color{green} {solution : } $ 因为 $ 1 $ 的个数我们最多只能选一个,所以剩下的数如果组成素数那么只有一奇一偶,显然是个二分图模型 #include &l ...

  3. 进阶篇：4）面向装配的设计DFA总章

    本章目的:理解装配的重要性,明确结构工程师也要对装配进行设计. 1.基础阅读 ①进阶篇:1)DFMA方法的运用: ②需要一台FDM3d打印机:请查看 基础篇:8)结构设计装备必备: 2.为什么要学习D ...

  4. CDQZ Day5

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

  5. Oracle WebLogic Server 12c 新特性

    美国时间2011年 12月9日,Oracle公司正式发布WebLogic 12c版本,c是cloud的缩写.截止当前(2013年8月)最新版本为Oracle WebLogic Server 12c ( ...

  6. 分分钟钟学会Python - 基础

    1.常见操作系统 1.windows xp/win7/win/10/window server 2.linux centos,图形化界面差 ubuntu,个人开发(图形化比较好) redhat,企业级 ...

  7. springboot和quartz整合分布式多节点

    虽然单个Quartz实例能给予我们很好的任务job调度能力,但它不能满足典型的企业需求,如可伸缩性.高可靠性满足.假如你需要故障转移的能力并能运行日益增多的 Job,Quartz集群势必成为你应用的一 ...

  8. flyway-Maven插件-configuration节点配置详解

    <configuration> <driver>org.hsqldb.jdbcDriver</driver> <url>jdbc:hsqldb:file ...

  9. IE11在使用get方式提交没有进行请求的bug问题

    在做iemsc项目的时候,测试提交了一个bug问题,在发布新闻成功后,自动刷新列表的时候,不进行刷新,但是在谷歌上面又不会出现这种问题, 原因: 发现请求的时候用的get请求,因为不同的浏览器的请求机 ...

  10. Android创建定时和周期任务

    问题:应用需要按时执行某个操作,例如定时更新UI. 解决方案:使用Handler提供的定时操作功能.通过Handler,可以在指定的时间或是指定的延时后执行操作. 下面看一个在TextView中显示当 ...