分享一个开源的JavaScript统计图表库，40行代码实现专业统计图表

Magicer 发布于2019-08-23 12:33 / 595人阅读

摘要：柱状图，饼状图，点状图等等您能想到的类型全部支持。这个开源库的官网直接看如何只用行代码就实现专业的统计图表。第八行声明要显示的统计图的类型。如果是线状图，柱状图这些类型，则定义的维度作为统计图的纵坐标也就是坐标。

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

推荐一个功能强大的文件搜索工具SearchMyFiles

介绍一个好用的免费流程图和UML绘制软件-Diagram Designer

介绍Windows任务管理器的替代者-Process Explorer

介绍一个强大的磁盘空间检测工具Space Sniffer

如何在电脑上比较两个相似文件的差异

程序员工作效率提升系列-推荐一个JSON文件查看和修改的小工具

将Chrome调试器里的JavaScript变量保存成本地JSON文件

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

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

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

效果如下：

简单解释下代码。

第二行：这个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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

云服务器 GPU云服务器 php实现统计图表统计图表分析大数据统计图表 asp js统计图表

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98730.html

常用的数据可视化工具

摘要：俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。是一个地图库，主要面向数据可视化用户。俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 评论0 收藏0
Eclipse被卡死了或者失去响应了后分析根源的一个小技巧

摘要：没有经验的朋友可能会用任务管理器强制结束进程，抱着侥幸的心理一次又一次得重试，希望这个卡死或者失去响应的问题可以不再出现，但往往事与愿违。本文介绍的这个通用办法适用于一切不能正常工作时的故障排查和分析。提升程序员工作效率的工具/技巧推荐系列推荐一个功能强大的文件搜索工具SearchMyFiles 介绍一个好用的免费流程图和UML绘制软件-Diagram Designer 介绍Win...

王陆宽 2019-08-16 13:31 评论0 收藏0
Eclipse被卡死了或者失去响应了后分析根源的一个小技巧

摘要：没有经验的朋友可能会用任务管理器强制结束进程，抱着侥幸的心理一次又一次得重试，希望这个卡死或者失去响应的问题可以不再出现，但往往事与愿违。本文介绍的这个通用办法适用于一切不能正常工作时的故障排查和分析。提升程序员工作效率的工具/技巧推荐系列推荐一个功能强大的文件搜索工具SearchMyFiles 介绍一个好用的免费流程图和UML绘制软件-Diagram Designer 介绍Win...

liukai90 2019-08-23 12:33 评论0 收藏0
12个值得关注的顶级可视化JS库涉及图表、动画、时间处理，表格操作

摘要：本文是译文，原文是我在原文的基础上加了百度的图表库，这个也是毫不逊色其他图表库的。更新记录图表类数据驱动文档通常被称为最强大的开源可视化库。是迄今为止最好的图表库。在顶级功能支持，使任何元素可拖动，可旋转或可滑动滚动和快速性能的能力。本文是译文，原文是https://da-14.com/blog/top-11...我在原文的基础上加了百度的Echats图表库，这个也是毫不逊色其他图表...

JinB 2019-08-20 14:14 评论0 收藏0