Chart.js (v2.9.4)--如何像高版本一样支持skipNull
项目开发中,用到Chart.js展示图表,用起来也非常方便,配置很灵活,很好用,给个数据集,设置一些配置值,实例化一个Chart出来,图表就非常丝滑地展现出来了。
但是作为开发人员都知道的一个真理,永远不变的就是变化,永远无理的都是客户的需求。
很不幸,我就撞到这么一个的需求:“把那些值为0的数据集,从chart图表中移除,碍眼”。

baidu和bing这一顿疯狂搜索,好嘛,v2版本的Chart.js根本不支持这个功能,升级到高版本,也有点麻烦,因为V3以上的版本,并不是完全向前兼容。
解决问题的方法就是:Chart.js是开源的,可以看源码,通过修改代码,来满足这个需求,以下是修改源码满足需求的详细过程:
用notepad++打开v2.9.4版本的chart.js(公司现在用的就是这个版本), 最好用notepad++的jsTool插件工具格式化一下,代码有点乱。
1,定位到 4970行的computeFitCategoryTraits()函数,添加一个参数 strackCount,然后在4972行,改成var count = strackCount || ruler.stackCount; 如下图示:

2,定位到5141行的getStacks函数,添加一个dataIndex参数,然后插入5153~5158这个几行新代码,

3 定位到5179行的getStackCount函数,新增dataIndex参数,再给getStacks传递这个参数

4 定位到5191行的getStackIndex函数,新增dataIndex参数,也是同样给getStacks传递这个新增的参数

5 定位到5249行的calculateBarIndexPixels函数,
新增5296行的代码,这个skipNull的配置可以自定义到自己喜欢的配置项上,这里我是配置到了dataset集合,后面会说怎么配置。
给computeFitCategoryTraits新增stackCount函数。
给getStackIndex也新增一个参数,根据skipNull配置的值传递具体值。

6,最后再dataset配置里新增skipNull配置项

最终的效果如下:

需求是满足了,不过还有个问题,就是假如项目用的是chart.js的min压缩版,咋整,这个压缩的代码可不好改啊,不要急,chart.js开放出来的可扩展性和可自定义性,丰富到令人发指.
方法如下:

在实例化出Chart(),之前,把上面几个步骤说到那几个要改动的函数,全部复制到这里,重新实现一次,覆盖原来的, 一样可以实现想要的效果。
Chart.js (v2.9.4)--如何像高版本一样支持skipNull的更多相关文章
- 数据可视化(1)--Chart.js
Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图.柱形图.雷达图.饼图.环形图等.在每种图表中,还包含了大量的自定义选项,包括动画展示形式. Char ...
- [转]Chart.js入门教程
Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...
- Chart.js入门教程
Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...
- atitit.atiOrm.js v2 q61 版本新特性.docx
atitit.atiOrm.js v2 q61 版本新特性.docx 1. V1新特性如下1 1.1. V2规划,直接生成sql在js端1 2. Orm设计框架图1 2.1. atiOrm.js的原理 ...
- chart.js使用常见问题
Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 在使用过程中新手可能会遇到很多问题导致图标无法显示.下面我们来看一下在使用过程中可能会遇到的问题. 刚开始用chart.j ...
- chart.js应用中遇到的问题
问题一:chart.js的版本问题:打开官网https://github.com/chartjs/Chart.js/releases/tag/v2.7.3,点击Tags,选择最新版本,我这里选用的是V ...
- JS组件系列——开源免费图表组件:Chart.js
前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...
- Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...
- Heatmap.js v2.0 – 最强大的 Web 动态热图
Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示.Heatmap.js 这个 JavaScript 库可以实现 ...
- Rails-treasure chest4: 使用图表对资料进行分析chart.js(及其他);管理用户权限的gem 'Pumdit'(6000🌟)
* 多档案上传* 图表资料分析 Chartkick gem或者 chart.js* 用户权限控管 gem Pundit (6000✨) *HTML E-mail 寄送 : gem premaile ...
随机推荐
- C# 项目打包详解--赞
项目打包流程如下: 第一步:项目必须先安装 Microsoft Visual Studio Installer Projects 安装步骤:打开VS-->工具-->扩展和更新--> ...
- C# PropertyChanged 事件-数据绑定
在.NET平台上,数据绑定是一项令人十分愉快的技术.利用数据绑定能减少代码,简化控制逻辑. 通常,可以将某个对象的一个属性绑定到一个可视化的控件上,当属性值改变时,控件上的显示数据也随之发生变化.要实 ...
- 格式化字符串走过的坑 pwn109
格式化字符串走过的坑 pwn109 今天做的一道题有一个坑我调试半天终于打通了,格式化字符串的坑,确实不少,东西也比较多容易忘记,怎么说呢,功夫在平时,经验少了 老规矩先看一下保护 Full RELR ...
- 并发系列64章(TPL 数据流(二))第八章
前言 续第七章. 正文 数据流块的并行处理 数据流块在网格上本身就是并行的,为什么这么说呢? 加入有两个数据库,他们链接在一起,然后给他们post数据. 当数据流块一在运行的时候,数据流块二也在执行, ...
- 从零开始写 Docker(十一)---实现 mydocker exec 进入容器内部
本文为从零开始写 Docker 系列第十一篇,实现类似 docker exec 的功能,使得我们能够进入到指定容器内部. 完整代码见:https://github.com/lixd/mydocker ...
- ImageJ软件使用教程(三):目标计数
目录 多点工具法 阀值分割法 二值化 填充分割 自动计数 显示结果 总结 参考资料 本文以钢筋计数为例,讲解一下如何使用ImageJ软件进行计数,这里只介绍两种方法: 多点工具法 阀值分割法 钢筋计数 ...
- 【NOIP2013模拟联考8】匹配(match) 题解
B 组都说看不懂--我也解释不清啊--只能写这么详细了 其实就是道板题 省流:f[i][s][j]表示字符串长度i,匹配情况s,ac自动机节点j Problem Description 给定k个字符串 ...
- flutter 移动应用程序中打开URL
url_launcher: ^6.2.5 在Flutter中,url_launcher库是用于在移动应用程序中打开URL的常用工具.它允许你通过调用系统的浏览器或其他应用程序来打开指定的URL,比 ...
- 真正的HTAP对用户和开发者意味着什么?
简介: Gartner 2016 年首次提出 HTAP(Hybrid Transaction / Analytical Processing,混合事务分析处理)并给出明确的定义:即同时支持 OLTP ...
- [FAQ] edge debug栏的网络里 没有见到 All Fetch/XHR JS CSS 这些东西
一种方式是 打开调试器的设置,重置默认并刷新即可. 另一种方式是把这个 "筛选" 点掉. Tool:揭开网站所用的技术 Link:https://www.cnblogs.com ...