程序员经验分享-hwhale

如何隐藏/不绘制具有 0/null/未定义值的条形？

2024-03-07

如何隐藏错误的值？ （0、空或未定义）

我尝试过做类似的事情

new Chart(this.barCanvas.nativeElement, {

    ...

     data: {
            datasets: [{
                     data: [
                             value < 1 ? null : value,
                             value2 < 1 ? null : value2,
                             valueX < 1 ? null : valueX,
                     ],
            }],
    },
    options: {
            skipNull: true,
    }

    ...

}

但这不起作用。

我在 SOF 上发现了一些类似的帖子，但没有答案或工作解决方案

受 LeeLenalee 答案和 Zhulien 评论的启发，我创建了一个变量chartData我在通过之前进行过滤。

但是传递变量chartData出现类型错误data（复制过去的对象chartData并且直接传递它不会产生类型错误，但图形的视图不会加载）

indexToRemove是一个基于0的数据的索引数组

var chartData = {
      labels: ['Batterie faible', 'Maintenance', 'HS', 'Place libre', 'Place occupée'].filter((v, i) => indexToRemove.includes(i)),
      datasets: [{
        label: '',
        data: data.filter((v, i) => indexToRemove.includes(i)),
        backgroundColor: [
          '#F6741A',
          '#dc2625',
          '#B91C1B',
          '#22c55e',
          '#FACC14'
        ].filter((v, i) => indexToRemove.includes(i)),
        borderRadius: 4,
        borderSkipped: false,
      }]
    }

    new Chart(this.barCanvas.nativeElement, {
      type: 'bar',
      data: chartData, // <- Type error (But replacing by the object correct the type error but still does not work as said above)
    ...
    }

您可以事先过滤数据并与其一起使用对象表示法：

let initialData = [{
    "x": "label1",
    "y": 9
  },
  {
    "x": "label2",
    "y": 0
  },
  {
    "x": "label3",
    "y": 5
  },
  {
    "x": "label4",
    "y": 10
  },
  {
    "x": "label6",
    "y": null
  },
  {
    "x": "label7",
    "y": 3
  },
  {
    "x": "label8",
    "y": undefined
  }
];
let data = initialData.filter(e => e.y);

const options = {
  type: 'bar',
  data: {
    datasets: [{
      label: '# of Votes',
      data: data,
      backgroundColor: 'pink',
    }]
  },
  options: {}
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

chartjs

ionic6

如何隐藏/不绘制具有 0/null/未定义值的条形？ 的相关文章

  • TinyMCE 输入以相反顺序写入

    我面临这个问题 每当我输入 TinyMCE 时 我的光标会自动向左移动 最终从右向左写入文本 它只发生在我部署的应用程序中 但如果我在我的机器上本地运行代码 同样可以正常工作 发生这种情况的任何可能原因 相同的屏幕截图 https i st

  • 一个空的 JavaScript 对象有多少内存？

    选项A myobj a a a1 a1 a2 a2 a2a a2a a2b a2b a3 a3 a3a a3a a3a1 a3a1 a3a2 a3a2 b b vs 选项B myobj a a1 a1 a2 a2a a2a a2b a2b

  • 将二进制转换为十六进制

    我正在将二进制转换为十六进制 但下面的代码返回错误的答案 var number 1011 var hexa parseInt number 2 toString 16 return hexa 这返回b但应该必须退货B 问题是什么 b is正

  • 使用 HTML5 FileSystem API 将文件写入桌面

    我正在玩一下文件系统API http www html5rocks com en tutorials file filesystem 我发现了很多生成下载链接并让用户以 浏览器方式 下载文件的示例 我想知道两件事 有没有办法将fiddle中

  • Jest 中从未调用图像 onLoad 处理程序

    我正在尝试使用 Jest 测试将 dataUrl 加载到图像中 我正在使用 JSDOM 并按照说明添加resources usable 作为一个选项 如果我直接从 Node 运行该代码 则该代码可以工作 但是当我尝试在 Jest 中运行它时

  • 从 HTML 表单发送数据到 Node.js 服务器

    我正在学习 Node js 我的服务器中有这个 var http require http var url require url http createServer function request response response w

  • 全局 JavaScript 变量作用域：为什么这不起作用？

    所以我在玩 JavaScript 时遇到了我认为奇怪的事情 有谁能解释一下以下内容吗 我已将警报值作为评论包含在内 为什么 foo 中的第一个警报 msg 返回不明确的并不是outside var msg outside function

  • 画布图像遮罩/重叠

    在我的项目中 我必须使用画布在另一个相同尺寸和图案图像上实现一个不同的颜色图像 并且图像不是圆形或矩形形状 所有这些都是波浪形状的 它将应用于单个主背景图像 以便在每个主背景图像上显示多个图形onclick功能 重叠的图像应更改为另一种选定

  • 使用 word_number 值对 javascript 数组进行排序

    如何对数组进行排序 var arr new Array word 12 word 59 word 17 这样我得到 word 12 word 17 word 59 Thanks 您需要编写一个排序方法 您可以编写任何您喜欢的方法 该方法在

  • 过滤器返回 true 或 false

    我正在使用过滤器在 data it 返回对象中查找 id 它返回的对象不是 true 或 false 如果我怎样才能返回 true 或 falseval recoredId valueId var hasMatch data filter

  • IE8 中的 Javascript 消息超出堆栈空间

    我正在使用 Breeze 1 4 1 Internet Explorer 8 和 ASP NET MVC 4 Web API 我在查询时收到以下消息 查询失败 localhost port breeze Data Metadata 元数据导

  • React.js this.props.data.map() 不是一个函数

    我正在搞乱反应并尝试解析和渲染 json 对象 现在 我只是使用硬编码对象设置它以进行测试 而不是从 ajax 调用中获取它

  • 如何正确关闭 Node.js Express 服务器？

    我需要在收到回调后关闭服务器 auth github callback网址 与平常一样HTTP API http nodejs org docs latest api http html关闭 服务器目前支持server close call

  • jQuery 问题：它的真正含义是什么？

    function window undefined jquery code jQuery window 它到底意味着什么 是不是也意味着 document ready 或者只是两种不同的东西 已经有两个答案 但这是我对代码缺失端的猜测 fu

  • 从 UnityWebGL jslib 返回字符串

    我想使用 jslib 来获取网址参数 像这样的代码 jslib GetUrl function var s var strUrl window location search var getSearch strUrl split var g

  • Jest - 语法错误：无法在模块外部使用 import 语句

    我在用jest 24 9 0无需任何配置 从 create react app 全局安装 在这些文件中我使用 es6 模块 使用时没有报错 test react scripts test 但是当我开始使用时jest with test je

  • Niceedit本地上传图片失败

    我是这样称呼编辑的 new nicEditor buttonList bold italic underline upload iconsPath img nicedit png uploadURI http server com inte

  • router.navigate 使用查询参数 Angular 5

    我在使用查询参数路由到路由时遇到问题我有一个像这样的函数 goToLink link this router navigate link split 0 queryParams this sortParams link 和这个功能 sort

  • ES6解构对象赋值函数参数默认值

    您好 我正在查看在传递函数参数时使用对象解构的示例对象解构演示 https developer mozilla org en US docs Web JavaScript Reference Operators Destructuring

  • 相当于 JavaScript 中 Ruby 的each_cons

    许多语言都曾提出过这个问题 但 javascript 却没有 Ruby 有方法Enumerable each cons https devdocs io ruby 2 5 enumerable method i each cons看起来像这

随机推荐

热门标签