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

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

这个开源库的官网：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. Python Web开发最难懂的WSGI协议，到底包含哪些内容？

    原文出处: PythonScientists 我想大部分Python开发者最先接触到的方向是WEB方向(因为总是有开发者希望马上给自己做个博客出来,例如我),既然是WEB,免不了接触到一些WEB框架, ...

  2. [yii]Fetch data from database and create listbox in yii

    <?php $records = User::model()->findAll(); $list = CHtml::listData($records, 'id', 'username') ...

  3. Github--开源代码仓库式系统（转）

    要了解Github,我们首先要知道Git,Git是管理代码的工具,写代码不是件轻松的事儿,一个人写的时候已经不轻松了,一群人写就更不轻松了,但这世界上很多事都是怎么不轻松怎么来的,大部分人都会和别人一 ...

  4. bzoj1911 [Apio2010]特别行动队——斜率优化DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1911 相当明显的斜率优化,很好做: 注意slp里面要有(double),以免出现精度问题. ...

  5. Centos6.5 6.6 （均可） 重置密码或强行破解root密码 简单操作

    centos忘记root密码怎么重置root密码? 使用Linux系统的时候root密码是十分关键的安全机制. 但是假设那天丢失了root密码的话问题就严重了. 百牛信息技术bainiu.ltd整理发 ...

  6. 数据库sql互转（oracle转mysql为例子）

    转自: https://blog.csdn.net/sinat_32366329/article/details/76402059 在PowerDesinger里找到 File -->> ...

  7. 6-6 Haar特征3

    B区域是包含AB这样两部分的.C区域是包含A和C这样两部分的.B区域和C区域它描述的是一个横条和一个竖条.D区域是四个方块之和. #haar 1 什么是haar? 特征 = 像素 运算 ->结果 ...

  8. input required字段；django input输入框不填写会自动变红如何修改

    前端页面中,input不输入任何内容时,点击submit时,未填写的input会标红框,有些人还会有"该字段必填的字样"!! 什么鬼,你妹的,js也见不到,css3动画也见不到,怎 ...

  9. 洛谷 - P1219 - 八皇后 - dfs

    https://www.luogu.org/problemnew/show/P1219 一开始朴素检查对角线就TLE了,给对角线编码之后压缩了13倍时间? 找了很久的bug居然是&&写 ...

  10. csacademy Round #36(模拟+最坏情况)

    传送门 题意 给出n种袜子,每种袜子个数a[i],两只相同种类袜子配成一对,询问至少拿出多少只袜子能确保配出k对袜子 分析 In order to find out the minimum numbe ...