程序员经验分享-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的圆环图上显示每个弧的值 的相关文章

随机推荐

  • 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

热门标签