项目开发中,用到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. 数据可视化(1)--Chart.js

    Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图.柱形图.雷达图.饼图.环形图等.在每种图表中,还包含了大量的自定义选项,包括动画展示形式. Char ...

  2. [转]Chart.js入门教程

    Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...

  3. Chart.js入门教程

    Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...

  4. 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的原理 ...

  5. chart.js使用常见问题

    Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 在使用过程中新手可能会遇到很多问题导致图标无法显示.下面我们来看一下在使用过程中可能会遇到的问题. 刚开始用chart.j ...

  6. chart.js应用中遇到的问题

    问题一:chart.js的版本问题:打开官网https://github.com/chartjs/Chart.js/releases/tag/v2.7.3,点击Tags,选择最新版本,我这里选用的是V ...

  7. JS组件系列——开源免费图表组件:Chart.js

    前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...

  8. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...

  9. Heatmap.js v2.0 – 最强大的 Web 动态热图

    Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示.Heatmap.js 这个 JavaScript 库可以实现 ...

  10. Rails-treasure chest4: 使用图表对资料进行分析chart.js(及其他);管理用户权限的gem 'Pumdit'(6000🌟)

    * 多档案上传* 图表资料分析  Chartkick gem或者 chart.js* 用户权限控管  gem Pundit (6000✨) *HTML E-mail 寄送 : gem premaile ...

随机推荐

  1. [一本通1677/JZOJ1217/CJOJ1101]软件开发 题解

    题目描述 一个软件开发公司同时要开发两个软件,并且要同时交付给用户,现在公司为了尽快完成这一任务,将每个软件划分成\(m\)个模块,由公司里的技术人员分工完成,每个技术人员完成同一软件的不同模块的所用 ...

  2. 【FAQ】接入HMS Core广告服务中的常见问题总结和解决方法

    HMS Core广告服务(Ads Kit)为开发者提供流量变现服务和广告标识服务,依托华为终端能力,整合资源,帮助开发者获取高质量的广告内容.同时提供转化跟踪参数服务,支持三方监测平台.广告主进行转化 ...

  3. WPF开发随笔收录-操作注册表

    一.前言 在windows平台软件开发过程中,注册表的操作是经常会遇到的一个场景.今天记录一下在操作注册表时遇到的一些坑: 二.正文 1.操作注册表,于是直接从网上找了一段代码来用 /// <s ...

  4. locust的 -T,--tags使用

    官网的TAG配置说明:-T [TAG [TAG ...]], --tags [TAG [TAG ...]]List of tags to include in the test, so only ta ...

  5. 深度解读《深度探索C++对象模型》之数据成员的存取效率分析(一)

    接下来我将持续更新"深度解读<深度探索C++对象模型>"系列,敬请期待,欢迎关注!也可以关注公众号:iShare爱分享,自动获得推文和全部的文章列表. 在<深度解 ...

  6. 力扣341(java)-扁平化嵌套列表迭代器(中等)

    题目: 给你一个嵌套的整数列表 nestedList .每个元素要么是一个整数,要么是一个列表:该列表的元素也可能是整数或者是其他列表.请你实现一个迭代器将其扁平化,使之能够遍历这个列表中的所有整数. ...

  7. 阿里本地生活全域日志平台 Xlog 的思考与实践

    简介: 作者:王宇(御田).当你踏进了编程的领域,代码和日志将是你最重要的伙伴".基于日志的问题排查是研发效能领域的重要部分,阿里集团本地生活在支撑多生态公司.多技术栈的背景下,逐渐沉淀了一 ...

  8. [FE] Quasar 性能优化: 减小 vendor.js 尺寸

    默认情况下,出于性能和缓存的原因,Quasar 所有来自 node_modules 的东西都会被注入到 vendor 中. 但是,如果希望从这个 vendor.js 中添加或删除某些内容,可以如下这样 ...

  9. [Blockchain] Cosmos Starport 地址前缀的变更方式

    # 在新的区块链上修改 starport app github.com/hello/planet --address-prefix your_new_prefix # 在已存在的区块链上修改 `app ...

  10. dotnet 6 精细控制 HttpClient 网络请求超时

    本文告诉大家如何在 dotnet 6 下使用 HttpClient 更加精细的控制网络请求的超时,实现 HttpWebRequest 的 ReadWriteTimeout 功能 本文将介绍如何在 Ht ...