Rails、Chartkick:在图表上显示值

2023-12-13

The 图表踢gem 可以让您创建多种图表。目前,我的图表如下所示:

饼图@institutions

enter image description here

柱形图@stats

enter image description here

我希望这些值显示在图表上。在饼图中,我希望数字 244 和 43 在饼图内部或外部可见。在柱形图中,我希望将值放在顶部或柱中。这有可能吗?

关于饼图,已经有一个stackoverflow 问题,但接受的答案对我没有任何作用:

pie_chart Visits.group(:country).count,库:{pieSliceText: '值和百分比'}

我尝试添加选项

库:{pieSliceText:'值和百分比'}

但一切都没有改变。我究竟做错了什么?是否有我缺少的选项或设置?

还有一个,类似的stackoverflow 问题,其中提出了以下解决方案:

<%= pie_chart @my_data, library: { pieSliceText: 'value' } %>

and

pie_chart graph_data, { pieSliceText: 'value' }

但两者都不适合我。可能有新的语法吗?

EDIT 1:

<% data = [['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]] %>

<%= pie_chart data, library: { pieSliceText: 'value' } %>

给了我这个:

enter image description here

编辑 2:Chartkick 提出了 3 种安装 Chartkick 的方法。我选择了第一个 Chart.js。由于有帮助的评论,我现在安装了第二种方式。现在,我的饼图显示了数字。


我试过了,效果很好

<% data = [['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]] %>

<%= pie_chart data, library: { pieSliceText: 'value' } %>

enter image description here

结构是什么@institutions,可能会导致一些问题。

更新::在柱形图上

Chartkick 的 GH 表示目前还没有官方支持在每列上显示数据https://github.com/ankane/chartkick.js/issues/38#issuecomment-271117774

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

Rails、Chartkick:在图表上显示值 的相关文章

随机推荐

  • 带有相应归属链接的随机背景图片?

    我有一个页面显示 5 张图像数组中的随机背景图像 我还想在页面底部提供该图像的适当归属链接 但我不确定如何使用 javascript 或 php 执行此操作 这就是我现在所拥有的
  • 隐式复制构造函数/赋值运算符的行为

    我有一个关于 C 标准的问题 假设您有一个带有用户定义的复制构造函数和赋值运算符的基类 派生类使用编译器生成的隐式类 派生类的复制 赋值是否调用用户定义的复制构造函数 赋值运算符 或者您是否需要实现调用基类的用户定义版本 感谢您的帮助 如果
  • R 基于应用于多列的多个部分字符串过滤行

    数据集样本 diag01 lt as factor c S7211 J47 J47 K729 M2445 Z509 Z488 R13 L893 N318 L0311 S510 A047 D649 diag02 lt as factor c
  • 序列化对象时忽略继承的类

    当我从一个类继承并序列化新类时 我获得了所有属性 我怎样才能防止这种情况发生 我无法控制我继承的类 所以我无法向其属性添加属性 XmlIgnore Example class A public string PropertyA get se
  • 用单个字符初始化字符串

    我想初始化一个std string具有单个字符 以下代码不起作用 int main string s c cout lt
  • 如何在asp.net core 3中设置json序列化器设置?

    旧版 ASP NET Core 应用程序的 json 序列化器设置是通过添加AddMvc AddJsonOptions 但我不使用AddMvc in asp net core 3 那么如何设置全局 json 序列化设置呢 AddMvc返回一
  • java中会话超时删除cookie

    我正在开发一个java web应用程序 我已经在其中配置了session timeout等于 4 分钟 此应用程序也使用 cookie 我的问题是 4 分钟不活动后 HttpSession 过期 但 cookie 仍保留在浏览器中 年龄设置
  • VBA:文本框新/下一行

    我的文本框需要一些帮助 我的文本框内容由单元格值提供 现在单元格值的构造如下 日期注释 并且它逐渐发生 我可以有多个这样的条目 基本上 我希望我的文本框将每个值显示为用户表单中文本框中的单行 使它们看起来像项目符号列表 这可能吗 我正在考虑
  • 带有 Material ui 和 Reactjs 的嵌套侧边栏菜单

    我正在尝试使用 Material ui 开发一个侧边栏菜单 我可以制作简单的列表 在我的项目中 我需要嵌套侧边栏菜单 但我无法实现 如果我尝试使用递归函数 它仅提供主标题菜单 而不呈现子元素 请帮我开发它 嵌套侧边栏菜单的代码如下 impo
  • 在 Apache Web 服务器上部署 Angular 4 应用程序

    我想在我的 Apache Web 服务器上部署我的 Angular 应用程序 我已经添加了一个 htaccess文件到我的 var www html文件夹中 我尝试了几个base hrefs 但和很多人一样 我在路由方面也遇到了问题 我只能
  • wp7 枢轴控制设置标题为空

    对于 PivotControl 我使用这样的代码将 Title 和 Header 属性设置为 null 但数据透视控件仍然在 Header 中显示一个字符串 其中包含为该 PivotItem 绑定的对象的名称 我想基本上隐藏 PivotIt
  • TikZ 中节点名称的模算术?

    假设我想在 TikZ 中构建一个循环图 具有可变数量的节点 标记为 v0 v1 v n 1 用于我选择的某个 n 例如 5 我希望能够使用 TikZ 中的 foreach 命令迭代地 1 定义节点 以及 2 连接节点 比方说 我希望能够将
  • Tomcat JDBC 连接池问题:“语句已关闭”

    我有一个使用 Tomcat JDBC 连接池的服务器应用程序 这是我用来创建数据源的代码 PoolProperties connProperties new PoolProperties connProperties setUrl reso
  • django模板中相关字段名称的使用

    我有两个模型 如下所示 class A models Model a models BooleanField default False q models BooleanField default False class B models
  • 如何识别和删除文本中任何类型的项目符号

    我正在从 MS Word 复制一些数据 该文本在复制的文本中可能包含也可能不包含项目符号 但我需要 javascript 中的正则表达式来从复制的文本中删除任何类型的项目符号 例如 如果我复制带有项目符号的文本 那么当我粘贴它时 它会像这样
  • 如何使用 Python(不使用 PySpark)将 pandas 数据框插入现有的 Hive 外部表?

    我正在创建一个到 Hive 的连接字符串 并在该连接上的 Hive 表上运行一些 SELECT 查询 对检索到的数据执行一些转换后 我正在创建一个数据框df student credits看起来如下 NAME STUDENT INITIAL
  • 如何降级 Angular CLI 版本

    我已经更新了我的 Angular cli 版本 现在它显示 Angular 5 2 0 我在 Angular 4 中构建了整个代码 您能帮我完成降级我的 Angular cli 版本 特定版本 的步骤 以便我拥有 Angular4 这是我当
  • 每次使用 Rsync 保存时上传文件

    我使用 Eclipse PDT Ubuntu 10 10 进行 Web 开发 并使用 Rsync 手动成功上传更改的文件 rsync e ssh av home goksel Sites test email protected test
  • 如何从表中删除行

    这个问题是这个问题的后续问题 在 SAPUI5 表中添加新行的按钮 在我的新场景中 我在表格的第一列中添加了一个 删除 按钮 同样 JSON 文件如下所示 Invoices ProductName Pineapple Quantity 21
  • Rails、Chartkick:在图表上显示值

    The 图表踢gem 可以让您创建多种图表 目前 我的图表如下所示 饼图 institutions 柱形图 stats 我希望这些值显示在图表上 在饼图中 我希望数字 244 和 43 在饼图内部或外部可见 在柱形图中 我希望将值放在顶部或