程序员经验分享-hwhale

在chart.js的圆环图上显示每个弧的值

2024-01-21

这是我当前的圆环图，我想在弧本身上显示每个弧的值。 https://i.stack.imgur.com/DJeQD.png

这是图表的配置。

const genderConfig={
  plugins: {
    title: {
      display: true,
      text: "GENDER",
      font: {
        size: 20,
      },
    },
    legend: {
      labels: {
        boxHeight: 20,
        boxWidth: 25,
      },
      position: "bottom",
    },
  },
}

附注我知道有一个非常相似的问题，我已经尝试过该线程中提到的解决方案，但我认为当前版本的 Chart.js 不再存在该解决方案。


您可以使用chart.js datalabels插件，vor V3他们目前有一个候选版本，根据他们的这个问题，在正式发布之前有1个问题需要解决：https://github.com/chartjs/chartjs-plugin-datalabels/discussions/213 https://github.com/chartjs/chartjs-plugin-datalabels/discussions/213

V3示例：

Chart.register(ChartDataLabels)
var options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {}
}

var 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.2.1/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/chartjs-plugin-datalabels.min.js"></script>

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

javascript

ReactJS

chartjs

reactchartjs2

在chart.js的圆环图上显示每个弧的值 的相关文章

  • JavaScript 中的“new”关键字是什么？

    The newJavaScript 中的关键字第一次遇到时可能会很混乱 因为人们倾向于认为 JavaScript 不是面向对象的编程语言 它是什么 它解决什么问题 什么时候合适 什么时候不合适 它做了 5 件事 它创建一个新对象 这个对象的

  • 在 Javascript 中本地化字符串

    我目前正在使用 resx文件来管理我的 NET 服务器端资源 我正在处理的应用程序还允许开发人员将 JavaScript 插入各种事件处理程序中以进行客户端验证等 对我来说本地化 JavaScript 消息和字符串的最佳方法是什么 理想情况

  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section

  • 使用 requirejs 加载外部脚本而无需访问配置

    我正在尝试在我正在编写的插件中加载数据表 javascript 库 问题是 当我加载外部资源时 我会遇到冲突 因为当我调用 require 时 数据表与某些内容发生冲突 这是错

  • ngx-DataTable 对列进行排序无法正常工作 Angular 4

    虽然我对角度非常陌生 但我在使用 ngx DataTable 时遇到了一些困难 我使用简单的 ngx DataTable 进行简单的操作 问题出在列上 尽管我已将 attr 声明为 sortable true 但排序不起作用 这是代码 表定

  • 如何为 HTML5 音频元素制作加载栏？

    我正在尝试为 HTML5 音频元素制作一个加载栏 显示加载 缓冲的百分比 对于视频标签 可以使用以下方法进行计算 video buffered end 0 video duration 但我无法让它与音频标签一起使用 它只是返回一个固定值

  • jQuery 验证日期范围问题

    我的代码中有很多地方有成对的相关开始和结束日期字段 范围 我需要验证开始日期早于结束日期 我正在使用 jQuery 验证插件 这是我的代码 http jsfiddle net jinglesthula dESz2 http jsfiddle

  • 改进 D3 序列旭日示例

    This D3示例作为我的出发点 http bl ocks org kerryrodden 7090426 http bl ocks org kerryrodden 7090426 我想更改提供图表的数据 并且我做了以下新示例 http j

  • 单击输入字段会触发窗口调整大小

    我有一个带有徽标 菜单和搜索的标题 当我在桌面上时 我会按该顺序显示所有元素 但如果我的窗口宽度小于 980 像素 菜单会隐藏 有一个切换按钮 并且徽标会与nav并附在徽标之后 如果宽度更大 则徽标将再次分离并附加到 DOM 中的旧位置 w

  • 将 Google 电子表格解析为 Javascript 数组

    我有一个 Google 电子表格 https docs google com spreadsheets d e 2PACX 1vRc8Lx0N wf3f1xAAXkNFUqQjaWPFcde3YjK02gCBqGpUrULwHC6NC0sn

  • React router.push 和 router.replace 之间的区别？

    有什么区别React 路由器推送 and 路由器 替换 路由器历史记录就像一个stack of routes 当您使用router replace 您将覆盖堆栈的顶部 当使用router push 它在顶部添加了一条新路线stack 路由器

  • 由于固定导航，增加了 FancyBox v2 的顶部和底部边距

    我目前正在开发一个网站 该网站将来将具有响应能力 该网站主要由图像组成 单击这些图像会加载到 FancyBox 中 FancyBox v2 现在具有响应能力 因此可以在屏幕尺寸发生变化时重新调整图像等的大小 作为我设计的一部分 我有两个固定

  • PhantomJS 网页内存消耗？

    是否有一种编程方式 因为我想在运行时自动执行 方式来查看网页在通过 PhantomJs 运行时使用了多少内存 我也在使用 casperjs 如果这有帮助的话 我已经搜索了很多但没有找到任何方法 PhantomJs 使用 QtWebKit 因

  • 如何生成 JavaScript 堆栈跟踪？ [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 关于如何以跨浏览器的方式在 javascript 中生成堆栈跟踪有什么建议吗 较新的浏览器 Chrome 和 Firefox 公开了一个允

  • 显示班级图片 10 秒

    我有下面给出的代码显示9 boxes 其值如下digital time 还有一个班级box002显示digits相当于随机选择的九个盒子的值 box002 can be dragged to digital time starting wi

  • Javascript：更改输入值时设置光标位置

    当您输入公式时 我试图在我的应用程序中重现类似于 Microsoft Excel Google Sheets 的用户体验 并且您可以使用不同的公式和变量来自动完成下拉菜单 为此 在验证自动完成功能后 我希望能够控制光标的位置 例如 如果我输

  • JavaScript 中最长的通用前缀

    我正在尝试解决 Leet Code 挑战14 最长公共前缀 https leetcode com problems longest common prefix 编写一个函数来查找字符串数组中最长的公共前缀字符串 如果没有公共前缀 则返回空字

  • 如何设置 Firebase 用户的显示名称？

    根据Firebase网站上的JS Auth文档 它只展示了如何获取 displayName 以及如何更新 displayName 所以我尝试更新它 但这有点不合逻辑 因为你怎么能在不创建某些东西的情况下更新它呢 所以我的问题是 如何设置注册

  • Apollo 客户端延迟刷新

    In Apollo Client v3React 实现 我使用钩子来使用订阅 当我从订阅接收数据时 我想重新获取查询 但前提是查询之前已执行过并且位于缓存中 有办法实现这一点吗 我首先进行惰性查询 然后在收到订阅数据时手动检查缓存 然后尝试

  • NodeJS：如何获取服务器的端口？

    您经常会看到 Node 的示例 hello world 代码 它创建一个 Http Server 开始侦听端口 然后执行以下操作 console log Server is listening on port 8000 但理想情况下你会想要

随机推荐

  • Aurelia 取消订阅事件聚合器

    我在用Aurelia Framework with Typescript并在event aggregator我能够发布和订阅频道 问题是我无法取消订阅频道 注意 所有形式的 subscribe 方法都会返回一个 dispose 函数 您可以

  • 在windbg中调试.Net字符串值

    我有一个 Net 应用程序转储 它捕获了一个异常 我正在使用 Windbg 进行分析 并对其中一种方法的 String 参数的值感兴趣 我已经隔离了 String 对象 我的windbg工作是 0 000 gt loadby sos msc

  • Outlook 2007 加载项部署为 DLL

    我开发了第一个 Outlook 插件 我可以看到调试加载项会自动打开 Outlook 我注意到 Outlook 所涉及的问题20 sec当我的加载项附加时打开 作为一键式新菜单 我认为这可能是由于我正在调试我的项目造成的 我将加载项发布到本

  • 使用不同版本运行 Compass/SASS

    我正在尝试找到一个适用于两个不同罗盘项目的不错的解决方案 一种是基于使用 Blueprint 的 Compass 旧版本 另一种是基于 susy grid 较新版本 目前 我必须重新安装正确的版本watch过程 是否可以运行compile有

  • 消除 matlab 图 pdf 输出周围的空白

    我想在 LaTeX 文档中使用我的 matlab 绘图的 PDF 版本 我使用带有 PDF 选项的 saveas 命令保存数字 但 pdf 文件中的绘图周围有巨大的空白 这是正常的吗 我怎样才能摆脱它 当然 这是自动的 因为我有 很多 情节

  • 将值放入 array_walk_recursive() 之外的数组中[重复]

    这个问题在这里已经有答案了 我想递归地查找名为 image 的键的嵌套 JSON 对象 并将它们的值 URL 字符串 推送到函数外部的另一个数组中 从其他示例和 SO 问题中 我知道我需要传递对范围外数组变量的引用 但我对 PHP 不太熟悉

  • 如何使用 NSDateFormatter 将字符串日期转换为 NSDate

    我有以下日期作为 NSString Thu May 29 14 22 40 UTC 2014 我尝试使用以下代码将其转换为 NSDate NSDateFormatter fmt NSDateFormatter alloc init fmt

  • 仅获取我的 Android 应用程序附带的区域设置列表

    我知道有多种方法可以获取设备支持的所有区域设置的列表 有人能够获取您已包含在应用程序中的区域设置列表吗 使用以下代码我知道我可以获得设备支持的列表 String languages getAssets getLocales or Strin

  • 利用 Google 帐户凭据在 Android 中发送电子邮件

    在 Android 中是否可以使用手机关联的 GMail 凭据以编程方式发送电子邮件 当我明确提供用户名和密码时 我可以发送电子邮件 但我希望利用已经与手机关联的 Google 帐户 请注意 我不需要实际访问用户名或密码 我只是想间接利用这

  • Spark Cassandra 连接器使用 IN 子句进行过滤

    我在 java 的 Spark cassandra 连接器过滤方面面临一些问题 Cassandra 允许使用 IN 子句按分区键的最后一列进行过滤 例如 create table cf text a varchar b varchar c

  • Elasticsearch - 文档中片段的位置

    我正在执行如下所示的短语查询 它返回给我按相关性排序的突出显示的片段 当然 我希望用户单击某个片段 然后我会将文档滚动到相应的位置 但是 我在 Elasticsearch 中看不到任何方法来找出片段在原始文档中的位置 有任何想法吗 GET

  • 如何在Rails中缓存任意对象（基于时间）？

    我读了官方指南 它说有page cache action cache and fragment cache 但它们不是我想要的 我只是想缓存一个对象 而不是整个页面或视图片段 就像这样的伪代码 def show cache ads expi

  • Boto3：等待 S3 流式上传完成

    我在用着S3 Client upload fileobj with a BytesIO流作为输入 将文件从流上传到 S3 我的函数不应该在上传完成之前返回 所以我需要一种方法来等待它 从文档中看 没有明显的方法来等待传输完成 但有一些提示c

  • 我的 Android 设备没有出现在 adb 设备列表中

    我有一台 HP Slate 21 它使用 USB 电缆连接到我的 Windows 盒子 设备上已启用 USB 调试 After 添加适当的 SingleAdbInterface and CompositeAdbInterface https

  • IIS7 显示 iisstart.html 而不是默认文档

    我有一个在 IIS7 上运行的 Sitefinity 4 1 网站 我在默认文档列表的顶部设置 Default aspx 但是当我访问http www http www org 它显示 IIS7 欢迎页面 当我访问时http www htt

  • 捕获引擎执行异常

    我有一个包含托管代码和本机代码的应用程序 应用程序当前有一个未处理的异常过滤器 通过 SetUnhandledExceptionFilter 设置 它捕获任何关键错误 生成小型转储 记录各种应用程序参数 然后退出程序 未处理的异常处理程序不

  • MySQL：删除同一行时发生死锁

    最近删除记录时遇到死锁 注意隔离级别是可重复读取 MySQL 5 7 这是重现步骤 1 创建一个新表 CREATE TABLE t id bigint 20 NOT NULL AUTO INCREMENT name varchar 32 N

  • 清除 django_session 表中的会话而不注销当前用户

    我正在 Django 中进行会话 默认情况下 django 将会话存储在django session 我发现没有办法清除会话 Though clearsessions可用于删除行 还建议将其作为 cron 作业运行 但这样做意味着注销所有登

  • 如何使用 Postman 通过 HTTP Basic 调用服务？

    我正在使用curl来发出请求 curl u NL91IOC2RWCM31G1ESWYX SvCuj0tFQjmclZDFQzdMqfrGZ5Qw5jfKM8 H Accept application json https api storm

  • 在chart.js的圆环图上显示每个弧的值

    这是我当前的圆环图 我想在弧本身上显示每个弧的值 https i stack imgur com DJeQD png 这是图表的配置 const genderConfig plugins title display true text GE

热门标签