程序员经验分享-hwhale

Chart.JS 工具提示回调标签和标题 (v3.5)

2024-05-04

(请注意：v2 有很多答案，这是 v3 的）

我正在尝试设置工具提示label and title对于圆环图。

Code:

        //Create the donut chart
    donut = new Chart('questions_positivity_donut', {
        type: 'doughnut',
        data: { 
            labels: ["Positive", "Other"],
            datasets: [{
                label: 'Sentiment',
                data: [user_context.state.avg_joy, (1-user_context.state.avg_joy)],
                backgroundColor: ['#a9a9a9','#f2f2f2']
            }]
        },
        options: {
            cutout: "70%",
            plugins: {
                legend: {
                    display: false
                },
                maintainAspectRatio: false,
                responsive: true,
                tooltip: {
                    callbacks: {
                        label: function(context) {

                            let label = new Intl.NumberFormat('en-US', {style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 0}).format(context.formattedValue);
                            return label;
                        },
                        title: function(context) {

                            let title = context.parsed.x;
                            return title;
                        } 
                    },
                    displayColors: false
                }                   
            }
        }
    });

The label现在可以工作，并显示数据的值，但是title返回空白，而不是返回数据的标签（“正”或“其他”）。

我怎样才能返回正确的标题tooltip.callback?

示例：“积极 35%”和“其他 65%”


如果您记录上下文，您可以看到它是一个包含对象的数组，在您使用的默认交互模式下，它仅包含一个项目，因此您可以选择该项目，然后访问label其属性如下：

var options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {

            let label = new Intl.NumberFormat('en-US', {
              style: 'percent',
              minimumFractionDigits: 0,
              maximumFractionDigits: 0
            }).format(context.formattedValue);
            return label;
          },
          title: function(context) {
            let title = context[0].label;
            return title;
          }
        },
      }
    }
  }
}

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

javascript

ReactJS

charts

chartjs

chartjsv3

Chart.JS 工具提示回调标签和标题 (v3.5) 的相关文章

随机推荐

  • 从应用程序访问 iCloud Drive 文件

    我希望我的应用程序支持 iCloud 以便我可以存储和获取 PDF 文件 我的问题是 如何在不使用 iCloud 的情况下访问 iCloud 驱动器文件UIDocumentPickerViewController 实际上我想在我的应用程序中

  • 如何以编程方式检测我的应用程序是否在 ASP.NET 页面中以 IIS 7.0 集成模式运行

    一般来说 我们应该控制我们的 AppPools 并能够强制使用托管管道模式 就我而言 我没有控制权 并且希望根据托管管道模式 集成与经典 以稍微不同的方式实现代码背后的代码 我只是不知道如何检测到这一点 有没有一种简单的方法可以从代码隐藏页

  • 使用 MapBox GL JS 无需访问令牌

    有没有办法使用MapBox GL JS没有访问令牌 我在文档中找不到任何提示MapBox GL JS https docs mapbox com mapbox gl js api 然而 Uber建议是可以通过他们的图书馆 https ube

  • 如何设置 MPEG-4 文件的“媒体创建”日期

    我有许多从各种数码相机格式转码的 MPEG 4 文件 其文件系统修改日期是正确的 我想设置 媒体创建 标签来匹配 这可以通过 属性 窗口的 详细信息 选项卡在 Windows 资源管理器中手动完成 设置 媒体创建 非常有用 因为 Windo

  • 强制 WcfSvcHost.exe 使用我的自定义服务主机

    是否可以强制 WcfSvcHost 当我执行 F5 或在解决方案中调试另一个项目时自动执行 使用自定义 ustom 服务 通过使用服务工厂 我的自定义服务主机在我的 asp net 主机容器中运行良好 该服务工厂又调用自定义服务库 但是当

  • 使用 ExecuteSqlCommand 调用存储过程（需要未提供的参数）

    我正在尝试使用 EF 调用存储过程context Database ExecuteSqlCommand因为我的参数之一是数据表 以下是该过程的参数 ALTER PROCEDURE mySchema myProc customerId INT

  • 由于 MSVCR110.dll，MS Visual Studio 2012 Ultimate 无法启动

    当我尝试运行 MVS 2012 时 我总是收到错误 在库 DLL MSVCR110 dll 中找不到过程 crtCreateSymbolicLinkW 的入口点 我已经从我的另一台计算机复制了这个 dll 文件 一切正常 但没有帮助0 o

  • 实现自己的“工厂”以重用 WPF 中的视图

    我目前正在使用WAF WPF 应用程序框架 http waf codeplex com discussions 361216用于 WPF 编程 我真的很喜欢为我的应用程序中的每个小视图单元拥有一个自己的 ViewModel 的想法 我随后以

  • 内置方法读取couchdb文件大小？

    我正在尝试使用 couchdb 作为消息存储 并想报告消息大小 理想情况下 读取 size 属性会很好 最坏的情况是我可以检查整个文档 JSON 的字符串长度 我什至可能想使用尺寸作为查看键 您认为记录文档大小的最佳方法是什么 为什么您认为

  • 使用 varargin (...) 时如何显示不同的函数用法？

    当您输入 Matlab 函数名称并打开大括号时 例如sum 在命令窗口中 将打开一个工具提示 显示此函数的所有可能用法 当我编写自己的接受函数时varargin 工具提示仅显示一个选项 而不是varargin puts e g myfunc

  • 如何将 OpenCV 等待键与 Chaquopy 一起使用

    我正在尝试使用 Chaquopy 将计算机视觉应用程序移植到 Android 当我尝试运行脚本时 以下行中出现以下错误 cv2 waitKey 100 打印到嵌入式 python 控制台的错误是 java chaquopy CQPEnv c

  • 带有 API 21 的 Snackbar

    我正在尝试在我的应用程序中实现新的 Snackbars 但我做不到 首先 我从以下位置下载了 zip 文件这个 SnackBarSampleActivity https github com nispok snackbar blob mas

  • 如何测试包含应用程序是否授予“允许完全访问”权限？

    我正在开发一个键盘扩展项目 在应用程序代码的某些点 我需要测试用户是否已授予键盘扩展的 允许完全访问 权限 协议是我需要从应用程序端进行这些测试 并在此基础上让用户访问键盘设置或在未授予权限的情况下提醒他 问题是这里提供的方法如下 func

  • pexpect 和 ssh：如何在 su - root -c 之后格式化一串命令

    我正在尝试迭代服务器和密码列表来更改一组服务器上的 sshd 配置 以便我可以使用无密码 SSH 密钥通过 root 登录 运行命令 我可以在 bash 中轻松完成此操作 但我正在尝试学习 Python 并且 显然 希望放弃手动输入密码 这

  • 如何保证auto_increment数字没有间隙？

    我有一个关于自动递增的问题 这是我的表 我首先拥有它 它可以顺利地递增 id id name 1 name1 2 name2 3 name3 4 name4 5 name5 6 name6 但是当我删除一条记录并插入一条新记录时 id从7开

  • bash while 循环线程

    我有一个 while 循环读取来自 a 的行 hosts while read line do ip line check done lt hosts 我的问题是我可以使用某种方法来加快速度 或者一次在 10 个主机上运行检查 每个检查都在

  • Firebase BigQuery 导出 - 历史数据

    当我尝试在 BigQuery 上搜索事件的历史数据时 我只能找到上周的事件 我无法在任何地方找到信息是否正确 或者我做错了什么 基本上我似乎只能查询过去一周的 events YYYYMMDD 它是否正确 您是否有机会在一周前从 Fireba

  • 如何找到 Rails 中的当前路线？

    我需要知道 Rails 中过滤器中的当前路线 我怎样才能知道它是什么 我正在处理 REST 资源 但没有看到命名路由 如果您尝试对视图中的某些内容进行特殊处理 您可以使用current page as in 或者一个动作和ID 或命名路线

  • 使用 PHP 将图像中的一种颜色替换为另一种颜色

    有人可以帮我编写一个简单的脚本 使用 PHP 将图像中的特定颜色替换为另一种颜色吗 这是一个示例 颜色从绿色变为黄色 如果你的意思是在 PHP 中使用 GD 库 你应该检查一下图像过滤器 http php net manual en fun

  • Chart.JS 工具提示回调标签和标题 (v3.5)

    请注意 v2 有很多答案 这是 v3 的 我正在尝试设置工具提示label and title对于圆环图 Code Create the donut chart donut new Chart questions positivity do

热门标签