今天写页面页面需求到柱状图标，今天介绍一下我所用的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. Mondrian Schema Workbench 概念及常用参数

    Schema Schema 定义了一个多维数据库.包含了一个逻辑模型,而这个逻辑模型的目的是为了书写 MDX 语言的查询语句.这个逻辑模型实际上提供了这几个概念: Cubes (立方体).维度( Di ...

  2. Python全栈-magedu-2018-笔记12

    第三章 - Python 内置数据结构 字典dict key-value键值对的数据的集合 可变的.无序的.key不重复 字典dict定义 初始化 d = dict() 或者 d = {} dict( ...

  3. php session的简单使用

    创建session: session_start(); $_SESSION['name'] = $value; 获取session: session_start(); echo $_SESSION[' ...

  4. Delphi导出word

    //导出Wordprocedure TFrm_Computing.ExportWord;varwordApp, WordDoc, WrdSelection, wrdtable, wrdtable1, ...

  5. Android文字识别之tesseract的使用

    关于tesseract识别工具有Google提供的版本有tesseract-android-tools,不过还有一个tesseract-two也是非常好用的,这里我们使用的是tesseract-two ...

  6. unity2018的坑点

    发布后有的电脑无法运行exe程序(反正我的电脑不行) 删除发布出来的一个叫UnityCrashHandler64.exe即可运行

  7. oracle connect by用法

    先用scott用户下的emp表做实验.emp表有个字段,一个是empno(员工编号),另一个是mgr(上级经理编号)下面是表中所有数据 1 select * from emp start with e ...

  8. 3、在Shell程序中使用的参数

    学习目标位置参数内部参数 如同ls命令可以接受目录等作为它的参数一样,在Shell编程时同样可以使用参数.Shell程序中的参数分为位置参数和内部参数等. 12-3-1 位置参数由系统提供的参数称为位 ...

  9. Python对日期进行格式化

    Python对日期进行格式化 把当前时间输出为2017-04-07 19:00:00.进入python交互命令行输入: > import datetime > currtime = dat ...

  10. MySQL的模糊搜索

    1.模糊搜索 第一时间我马上想到了关键字 like 1.1.所要查询的字段中包含特定 字符,但不确定其位置,使用两个%包起来 select * from phone where provider li ...