Chartjs 插件数据标签不在图表上显示值

2024-04-25

我正在尝试使用 Chartjs 数据标签插件获取每个条形上的值。 因此,在“a”条上方 a 想要看到数字 30,在“b”条上方或内部我想看到数字 50。

但它根本没有显示任何价值。

谁能帮忙并告诉我出了什么问题吗?

我也尝试过使用不同版本的chartjs,但没有帮助。

目前我正在使用 Chartjs 3.2.0 对于 Chartjs-plugin-datalabels 2.0.0

这是codesandbox中的一个例子https://codesandbox.io/s/chart-js-plugin-5ez9p?file=/src/App.tsx https://codesandbox.io/s/chart-js-plugin-5ez9p?file=/src/App.tsx


根据文档 https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#registration您仍然需要先注册该插件才能使用它:

import {Chart} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.register(ChartDataLabels);

工作代码和框:https://codesandbox.io/s/chart-js-plugin-forked-dig8k?file=/src/App.tsx https://codesandbox.io/s/chart-js-plugin-forked-dig8k?file=/src/App.tsx

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Chartjs 插件数据标签不在图表上显示值 的相关文章

随机推荐

  • GAM SDK 测试安装后不显示 Gmail 上下文小工具

    在 Google Apps Marketplace SDK 中测试安装流程后 我无法在 Gmail 中看到上下文小工具 以下是我创建项目所采取的步骤 以域管理员身份登录 创建 Google Apps 控制台项目 创建 OAuth2 客户端
  • 如何在 Angular 6+ 中的本地计算机上运行 Dist 文件夹?

    我正在构建应用程序Angular6 现在我运行命令ng build prod这给了我一个 dist 文件夹 如何在本地主机上检查或提供该文件夹 你可以使用http服务器 https www npmjs com package http se
  • 如何列出已安装的 go 软件包

    据我所知go distribution带有某种package manager After go 1 4 1我已经运行的安装go help为了找到任何能够列出本地安装的子命令go packages 但不幸的是没有 那么该怎么做呢 goinst
  • python: from x import y 改变之前的导入结果

    我试图理解 python 中的包和模块名称隐藏规则 并偶然发现了一种情况 我不明白为什么我看到的结果有意义 这种情况发生在 python 2 中 from future import absolute imports 和Python 3 假
  • HTML5 视频在移动浏览器上自动播放

    我使用以下 HTML5 和 JQuery 代码来播放 URL 位于数组 URLArray 中的视频播放列表 function NextFrag if index lt URLArray length VideoContainer html
  • PHP 数组表示法中的大括号

    我刚刚遇到了一段非常奇怪的 php 代码 oink pig 1 var dump oink oink pig 123123 echo oink pig gt 123123 echo oink pig gt 123123 它的工作原理类似于数
  • TypeScript + NodeJS readline 属性缺失

    我正在使用 TypeScript 开发一个小项目tsc v 2 4 2和节点 v6 10 3 我想在 CLI 中捕获按键 所以我尝试import as readline from readline 然后稍后使用readline emitKe
  • 使用列表项的多重过滤器逻辑

    以下代码将搜索任何重复的类 li class duplicate duplicate 在无序列表中的列表项中 它将显示结果 show and hide 其他的 当前版本 目前它适用于两种场景 First 它显示具有相同类别 至少一个或多个
  • Python 中 FFT 的循环加速(使用“np.einsum”)

    Problem 我想加速包含大量乘积和求和的 python 循环np einsum 但我也愿意接受任何其他解决方案 我的函数采用形状为 n n 3 的向量配置 S 我的情况 n 72 并对 N N 点的相关函数进行傅里叶变换 相关函数定义为
  • 任务 :':app:mergeDebugResources' 执行失败。安卓工作室

    我刚刚安装了 android studio 出现一个错误 我不知道如何修复 尝试干净的项目 如果不起作用的话 然后 转到项目部分中的 build gradle 尝试降级gradle版本 From dependencies classpath
  • 离子范围滑块 2.0.3

    我正在尝试使用离子范围滑块 2 0 3 URL http ionden com a plugins ion rangeSlider demo advanced html http ionden com a plugins ion range
  • 类型错误:无法读取未定义的属性(读取“html”)

    我正在尝试将 Jest 引入我当前的项目 然而 在初始设置过程中 我遇到了这个错误 并且无法正常运行 我该如何解决这个问题 我目前正在使用 vue cli 中的 vue2 Test suite failed to run TypeError
  • 使用 Excel 连接函数

    我正在尝试将 Excel 中三列的数据合并到一列中 例如 我想将 Product Location 和 Key id 合并到一列中 Product Location Key Id Car VA 86421910 Car VA 8642448
  • 在 header("Location: ") 调用后是否调用 exit 有关系吗?

    我似乎无法找到答案 直到我发现这个帖子 http www php net manual en function exit php 90713 on exit在 php net 上 发送 Location 标头 PHP 后will继续解析 h
  • Matlab:不正确的索引矩阵参考(或智胜matlab)

    我希望能够写jasmine http pivotal github io jasmine 类似于 Matlab 中的测试 所以像 expect myfibonacci 0 toBe 0 expect myfibonacci 5 toBe 1
  • C# 与 C++ 中的运算符 new

    来自 C 我对使用newC 中的关键字 我知道它不像 C 那样工作new从某种意义上说 您不必手动控制对象的生命周期 因为 C 具有垃圾收集功能 然而 当阅读其他人的 C 代码时 我注意到代码片段 1 中的语句 避免使用new总而言之 就像
  • 如何在模拟器android studio中设置密度

    我想创建一个 Samsung Galaxy XCover4S 720 x 1280 px 5 00 294ppi 64 6 屏幕与机身比例 的模拟器 但是我只找到了如何设置预定义的密度 如 120 240 320 和更多密度 ppi in
  • 如何识别托管 bean 中单击的 commandButton

    我有一个actionListener我的托管 bean 中的方法由许多命令按钮调用 public void verifyTestDisponibility ActionEvent actionEvent if button1 clicked
  • SQL 作为访问表单字段的控制源

    有什么方法可以使用 SQL 填充 Access Form 的文本字段值吗 我读到不可能简单地输入 SQL 作为控制源 这是真的 谢谢你的帮助 edit 我需要执行这个查询 SELECT tblCaseIssues IssueDesc FRO
  • Chartjs 插件数据标签不在图表上显示值

    我正在尝试使用 Chartjs 数据标签插件获取每个条形上的值 因此 在 a 条上方 a 想要看到数字 30 在 b 条上方或内部我想看到数字 50 但它根本没有显示任何价值 谁能帮忙并告诉我出了什么问题吗 我也尝试过使用不同版本的char