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

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

这个开源库的官网：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. 理解 Android MVP 开发模式

    /***************************************************************************************** * 理解 Andr ...

  2. SPOJ:String Play (？)

    String Play Milo has a string S of length L. Tutu picks a random prefix and Mota picks a random suff ...

  3. Java常用数据结构和算法

    二叉树: 1.每个结点不能多于两个子树: 2.一颗平衡二叉树的深度要比及结点个数N小得多. 二叉查找树: 1.结点x的所有左子树的值小于x,所有右子树的值大于x: AVL树: 1.一种带有平衡条件的二 ...

  4. BZOJ_4698_Sdoi2008 Sandy的卡片_后缀数组+单调队列+双指针

    BZOJ_4698_Sdoi2008 Sandy的卡片_后缀数组 Description Sandy和Sue的热衷于收集干脆面中的卡片.然而,Sue收集卡片是因为卡片上漂亮的人物形象,而Sandy则是 ...

  5. 杂项：ASP.NET Core

    ylbtech-杂项:ASP.NET Core 1.返回顶部 1. ASP.NET Core 是一个跨平台的高性能开源框架,用于生成基于云且连接 Internet 的新式应用程序.使用 ASP.NET ...

  6. HDU 1996 汉诺塔VI (排列组合)

    题意:... 析:每次都是有三种放法,1,2,3,根柱子,所以就是3^n次方. 代码如下: #pragma comment(linker, "/STACK:1024000000,102400 ...

  7. hihocoder 1584 Bounce(找规律)

    传送门 题意 略 分析 我们观察几张图 发现菱形的边长为n-1和m-1的公约数 将图简化一下 接下来我们计算只经过一次的点,分成两类 1.与边相交 num1=x+y 2.未与边相交,在菱形内 num2 ...

  8. HDOJ3231醉

    反正一开始就是瞎几把看题,然后题意理解了,什么飞机?只能去看题解了. 呵呵,可惜,题解看了三个小时,还是一知半解,先写了. - -菜鸡超级详细题解,强行掰弯一波,等下再问问别人吧. OK,OK开始!! ...

  9. bzoj 2120: 数颜色【带修改莫队】

    比较裸的带修莫队,对每个修改操作记一下它修改的位置修改前的颜色 然后正常莫队,每次对修改操作时间倒流一下即可 #include<iostream> #include<cstdio&g ...

  10. 【杂谈】5G有啥用？跟咱有关系么？关注那玩意儿干啥？

    用处大了 有啥用? 云计算啊,你看看你电脑都卡成啥了? 既然5G速度赶上本地读取,那就相当于把硬盘放云端没问题了.那么,看看自己硬盘里都有啥,5G的用处或许就能一点点浮现出来了. ——请不要急着打开一 ...