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

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

这个开源库的官网：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. I.MX6 lcd lvds 注册流程

    /************************************************************************ * I.MX6 lcd lvds 注册流程 * 说明 ...

  2. Ruby: Print WIN32OLE method names in Ruby

    class WIN32OLE   def list_ole_methods     method_names = ole_methods.collect {|m| m.name}     puts m ...

  3. MYSQL数据库学习----MYSQL数据类型

    一切数据在计算中都是以二进制形式存储,而8位二进制数就表示1个字节. 通常我们说一种数据类型占多少字节,就是说这种数据类型可以表示多少位的二进制数,同时二进制数可以转换为十进制数,进而得到这种数据类型 ...

  4. 解决IIS中部署WCF时，访问.svc文件的404错误问题

    如果你直接在IIS 7中配置WCF,访问.svc文件时会出现404错误.解决方法,以管理员身份进入命令行模式,运行:"%windir%\Microsoft.NET\Framework\v3. ...

  5. struts2添加需要的jar包

    转自:https://blog.csdn.net/fance611261/article/details/6790737 以前总是在myeclipse中添加jar包的,由于现在转向了eclipse,原 ...

  6. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 22. 再讲Tag Helpers

    深入的讲Tag Helpers 加载app下面的所有的文件夹以及各自文件夹下面所有的js文件. exclude是排除掉Services文件夹和其下面的子文件夹 使用cdn加载远程的js文件 找hidd ...

  7. Androidstudio中添加jar包的方法

    在Androidstudio中添加一个jar包进去,怎么添加? 以下纯个人使用Androidstudio过程中的经验积累,要是有不足,望提出建议. 方法一: 先点击Androidstudio中的Pro ...

  8. hdoj1074【A的无比爆炸】

    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊,一开始我就不知道怎么写,然后看了题解是状压DP,后来去看了看状压DP也就这样嘛,但是难点,可以说是不熟悉的地方吧...如下: 第一.我们能很快的知道状压DP的原理: ...

  9. $ybt\ 【信息学奥赛一本通】题解目录$

    [信息学奥赛一本通]题解目录 $ \large -> OJ$ $ problem1000 $ \(Answer\) - > $ \large 1000$ $ problem1001 $ \ ...

  10. PHPmail 亲测可用

    2017年5月8日9:10:47 1.在模块的配置文件中加入下里面代码,账号最好用126邮箱'THINK_EMAIL' => array( 'SMTP_HOST' => 'smtp.163 ...