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

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

这个开源库的官网：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. VM 下安装ghost版系统

    一.首先分区,并激活主分区 二.设置cd-rom的接口为IDE(这项看情况来设置,如果提示 "units specified don't exist, SHSUCDX can't insta ...

  2. HihoCoder1084： 扩展KMP（二分+hash，求T串中S串的数量，可以失配一定次数）

    时间限制:4000ms 单点时限:4000ms 内存限制:256MB 描述 你知道KMP吗?它是用于判断一个字符串是否是另一个字符串的子串的算法.今天我们想去扩展它. 在信息理论中,在两个相同长度的字 ...

  3. AtCoder Beginner Contest 057

    A题 分析:24进制转换 #include<iostream> using namespace std; int main() { int a,b; while(cin>>a& ...

  4. Codechef WEASELTX

    WEASELTX code给你一棵 n 个节点的有根树(节点),以及每个节点 i 的初始权值 a[i] .一次操作则是指将每个节点的权值变为以其为根的子树中所有节点的权值之异或和.维护 q 个询问,每 ...

  5. (转载) 上传文件进度事件,进度事件(Progress Events)

    转载URL:https://www.w3cmm.com/ajax/progress-events.html MDN参考:https://developer.mozilla.org/zh-CN/docs ...

  6. 51nod 1347 【水】

    #include<cstdio> #include <map> #include<iostream> #include<string.h> #inclu ...

  7. hihoCoder 1032

    最长回文子串的O(1)算法Manacher算法 #include <iostream> #include <stdio.h> #include <string.h> ...

  8. JVM的参数详解

    今天就整理下JVM的参数!相对而已JVM有很多参数,但对于一般开发人员执行知道和堆栈大小,GC.远程调试的参数即可. JVM Parameters 首先需要说明的是JVM的参数形式: -X 开头的参数 ...

  9. RobotFramework自动化测试框架（1）- RobotFramework简介

    对于RobotFramework自动化测试框架,我这里会从三个单元进行阐述,希望能对你有帮助. RobotFramework简介 RobotFramework是什么? Robotframework 是 ...

  10. php连接mysql并读取数据

    <?php $server_name="localhost:3306"; //数据库服务器名称 $username="root"; // 连接数据库用户名 ...