提升程序员工作效率的工具/技巧推荐系列

这可能是史上最简单易用的开源统计图表绘制库了。柱状图，饼状图，点状图等等您能想到的类型全部支持。

这个开源库的官网：http://www.chartjs.org/

直接看如何只用40行代码就实现专业的统计图表。代码如下：

<html>

<canvas id="myChart" width="300px" height="300px"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

<script>

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {

type: 'line',

data: {

labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

datasets: [{

label: '# of Votes',

data: [12, 14, 3, 5, 2, 3],

backgroundColor: [

'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)',

'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)'

],

borderColor: [

'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)',

'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)'

],

borderWidth: 1

}]

},

options: {

responsive: false,

scales: {

yAxes: [{

ticks: {

beginAtZero:true

}

}]

}

}

});

</script>

</html>

效果如下：

简单解释下代码。

  • 第二行： 这个canvas结点作为最后绘制出的图表显示的一个容器，也就是说，最后画出来的统计图表就显示在这个canvas结点里。大家可以根据需要定义图标的宽（width）和高（height）。
  • 第三行：声明了这个开源库的CDN地址。
  • 第八行：声明要显示的统计图的类型。同一套数据是可以用不同的统计图类型显示出来的，可选的有bar, bubble, doughnut, horizontalBar, line, pie, polarArea, radar, scatter这几种。本文后半部分提供了每一种图的效果。
  • 第十行：labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]。定义了统计图表的一个维度。如果是线状图，柱状图这些类型，则labels定义的维度作为统计同的横坐标（也就是X坐标）。
  • 第十三行：data: [12, 14, 3, 5, 2, 3] 定义了统计图表的另一个维度。如果是线状图，柱状图这些类型，则labels定义的维度作为统计图的纵坐标（也就是Y坐标）。如果是饼状图，data定义的这些值是描述每个维度占整个饼（一个完整圆）的百分比。
  • 第二十六行：responsive: false，意思是使用第二行canvas指定的宽和高来绘制统计图表。如果response置为true，意思是响应式布局，会以全屏的方式显示图表。

这40行代码就讲解完了，对于应用程序开发人员来说，无需去研究里面的绘图细节，甚至连用户把鼠标放到图标上自动弹出tooltip这些细节都自动由这个库实现了，使用起来非常方便。

下面是把第八行代码图标的类型属性type传入各种支持的类型后的渲染结果，方便大家查阅：

type: line - 线状图

doughnut - 圈图

horizontalBar - 水平柱图

pie - 饼状图

radar - 雷达图

polarArea

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

分享一个开源的JavaScript统计图表库，40行代码实现专业统计图表的更多相关文章

  1. 分享一个开源的网盘下载工具BaiduPCS-Go

    大家在使用网盘的时候,一定忍受不了限速下载的速度.今天给大家分享一个开源的网盘下载项目BaiduPCS-Go.Go语言编写,仿 Linux shell 文件处理命令的百度网盘命令行客户端.多平台支持, ...

  2. Ptypes一个开源轻量级的c++库，包括对一些I/O操作、网络通信、多线程和异常处理的封装

    C++开源项目入门级:Ptypes    Ptypes一个开源轻量级的c++库,包括对一些I/O操作.网络通信.多线程和异常处理的封装.虽然代码有限,包括的内容不少,麻雀虽小,五脏俱全.    提高: ...

  3. 分享一个开源的流程图绘制软件--Diagram Designer

    最近在写专利文件,在制作说明书附图时想到自己还只会用wps进行简单的绘制,于是想学习下,填补下这方面的短板.这两天查到了DiagramDesigner这个小工具,派上了大用场.用它写完了一个发明专利, ...

  4. jquery轮播图详解，40行代码即可简单解决。

    我在两个月以前没有接触过html,css,jquery,javascript.今天我却在这里分享一篇技术贴,可能在技术大牛面前我的文章漏洞百出,也请斧正. 可以看出来,无论是div+css布局还是jq ...

  5. Python人脸识别最佳教材典范，40行代码搭建人脸识别系统！

    Face Id是一款高端的人脸解锁软件,官方称:"在一百万张脸中识别出你的脸."百度.谷歌.腾讯等各大企业都花费数亿来鞭策人工智能的崛起,而实际的人脸识别技术是否有那么神奇? 绿帽 ...

  6. 一步一步手写GIS开源项目-（1）500行代码实现基础GIS展示功能

    1.开篇 大学毕业工作已经两年了,上学那会就很想研读一份开源GIS的源码,苦于自己知识和理解有限,而市面上也没有什么由浅入深讲解开源gis原理的书籍,大多都是开源项目简介以及项目的简单应用.对于初级程 ...

  7. Spark技术内幕：一个图搞定Spark到底有多少行代码

    Spark1.0.0发布一个多月了,那么它有多少行代码(Line of Code, LOC)? 注:代码统计未包含测试,sample.

  8. 分享一个开源免费、目前最好的API接口管理平台----eoLinker

    一.概况 eoLinker 是目前业内领先.国内最大的在线 API 接口管理平台,提供自动生成 API 文档.API 自动化测试.Mock 测试.团队协作等功能,旨在解决由于前后端分离导致的开发效率低 ...

  9. 分享一个我的JavaScript版GridView多功能表格

    GridView是什么? GridView是由Mr.Co开发的一套开源的多功能表格插件,主要用于让页面开发者在开发中节省拼接Table表格和操作Table表格相关复杂操作的开发成本与时间.开发人员可以 ...

随机推荐

  1. 【CQ18阶梯赛第8场】题解

    [A:HDU2032 杨辉三角]: 简单的递推,或者是基础的DP: 但是只有杨润东一个人1A,整体准确率只有8/37,具体原因不详. 经验:提交前一定要试一下比较特殊的数据或者最大的数据.其次,为了保 ...

  2. [Selenium] IOS 之 appium

    从 Selenium 的官方文档来看,推荐用户使用 ios-driver 或 appium 而不是官方发布的 iPone Driver. 他们的地址分别是: http://ios-driver.git ...

  3. 「LuoguP1281」 书的复制（贪心

    Description 大多数人的错误原因:尽可能让前面的人少抄写,如果前几个人可以不写则不写,对应的人输出0 0. 不过,已经修改数据,保证每个人都有活可干. // 现在要把m本有顺序的书分给k给人 ...

  4. 【SOUTH CENTRAL USA 1998】 eight

    [题目链接] 点击打开链接 [算法] 这是经典的八数码问题,据说此题不做人生不完整 这里笔者用的是双向广搜,由于细节较多,笔者花了3h才通过此题 [代码] #include <algorithm ...

  5. cocos2d-x 坐标系解惑

    1.CCTouch* touch->getLocation() ---- 返回当前触摸点在openGL坐标系中的位置 openGL坐标系,原点在左下角,x向右为正,y向上为正. 2.CCTouc ...

  6. EJ20170430-hm

    alignment  n. 结盟; 队列,排成直线; 校直,调整; [工] 准线 aspect ratio  n. 宽高比; 纵横比,屏幕高宽比 aspect   n. 方面; thick   n.  ...

  7. poj1308【并查集】

    = =.如果输入的两个数相等.就不是一颗树啊,不能自己指向自己. 水.(瞎开的数组). //#include <bits/stdc++.h> #include<iostream> ...

  8. 关于js变量作用域

    先来看一段代码 var ss=1;function sss(){ alert(ss);}$(document).ready(function(){ var ss=2; alert(ss); sss() ...

  9. python多线程批量下载远程图片

    python多线程使用场景:多线程采集, 以及性能测试等 . 数据库驱动类-简单封装下 mysqlDriver.py #!/usr/bin/python3 #-*- coding: utf-8 -*- ...

  10. yield 为什么不能进入回调函数

    操他妈的, allowed_domains = ['voice.hupu.com'] 这里面必须是域名,而不能是个路径,遇见问题不要瞎几把想,及时Google才是正道!!!!!!!!!11 感谢: h ...