今天写页面页面需求到柱状图标，今天介绍一下我所用的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. jsoup 抓取省市区

    package com.xazhxc.htjcom.back.controller.base; import cn.hutool.core.util.StrUtil; import com.aliba ...

  2. SpringBoot入门（IDEA篇）（二）

    一.SpringBoot启动的3种方式 第一种:借助IDE工具直接启动 run as 第二种:mvn命令启动 1:打开命令行,进入到项目目录中(我这里还是用上次建立的dog项目来操作)cd E:\Wo ...

  3. centos的 / ~ - 的意思

    . 当前目录 .. 上一层目录 - 前一个工作目录,上一次操作的目录 cd - 会切换都上次你操作的目录 ~ 当前[用户]所在的家目录/ root的根目录

  4. Android Fragment原理及应用

    1.Fragment简介 Fragment(片段) 表示 Activity 中的行为或用户界面部分.您可以将多个片段组合在一个 Activity 中来构建多窗格 UI,以及在多个 Activity 中 ...

  5. Rx

    more detailed in WIKI's document SDP :session description protocal book AAA AA-Answer 鉴权授权应答AAR AA-R ...

  6. 认识CSS中布局之文档流、浮动、定位以及叠放次序

    前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...

  7. 移动APP的用户体验测试

    经常被问到用户体验测试,什么是用户体验测试,用户体验测试要关注的都有哪些呢,现在为大家来罗列一下: 1.横竖屏测试 在移动设备上做用户体验测试,最容易想到的就是对APP做横竖屏的测试来观察APP的显示 ...

  8. Locust HTTP client

    Http client 默认是以安全模式运行的,任何由于连接错误.超时或者类似错误引起的异常,都会返回一个空的Response对象,这个请求将会再locust统计中标记为failure,返回的虚拟对象 ...

  9. iview 之 穿梭框 transfer

    概述 双栏穿梭选择框,常用于将多个项目从一边移动到另一边. 说明 Transfer 组件主要基于以下四个 API 来使用: :data:总体数据,数组,每项为一个对象,且必须含有 key 值,组件基于 ...

  10. 学习python 3 入门知识

    1.安装 http://www.runoob.com/python3/python3-install.html https://www.python.org/ 2.使用 工具一:IDLE IDLE 是 ...