今天写页面页面需求到柱状图标，今天介绍一下我所用的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. Javascript 定时器的使用陷阱 (setInterval)

    setTimeout(function(){ // 其他代码 setTimeout(arguments.callee, interval); }, interval); setInterval会产生回 ...

  2. JS及Dom示例 | 分级菜单折叠

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue与TypeScript集成配置最简教程

    https://blog.csdn.net/u014633852/article/details/73706459 https://segmentfault.com/a/119000001187808 ...

  4. webpack查缺补漏

    webpack是模块化打包工具,通过webpack,可以使得我们更加方便地组织代码.压缩.转译等等. 但是学习webpack也需要一定的成本,这里记录使用webpack许久以来一些模糊的知识点,方便以 ...

  5. Python数据类型（字典）

    文章内容参考了教程:http://www.runoob.com/python/python-basic-syntax.html#commentform Python 字典(Dictionary) 字典 ...

  6. android 用命令行打包生成 apk

    android 用 ant 进行 build. android sdk 下面的 tools/ant 下面的 build.xml 就是 build 的整个过程. 其中的 build 参数可在 ant.p ...

  7. ZOJ 2856 Happy Life

    Problem Description Do you know Utopia? It's a perfect world in which everyone leads a happy life. A ...

  8. ubuntu下安装Sublime Text2

    1.下载Sublime Text2官网下载地址:http://www.sublimetext.com 2.安装Sublime Text2解压即可使用,如linjiqin@ubuntu:~$ sudo ...

  9. css3画半圆

    border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如:.semicirc ...

  10. 万物智联，腾讯云 IoT 边缘计算揭秘——云+未来峰会开发者专场回顾

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 背景:现在是万物互联的时代,智能穿戴设备,智能家居,无人商业,改变了我们的生活方式.预计到2021年,全球物联网设数将达到150亿,超过手机 ...