ruby-on-rails - rails ,Chartkick : Show values on the charts

标签 ruby-on-rails chartkick

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

pie_chart @institutions

enter image description here

column_chart @stats

enter image description here

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

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

pie_chart visits.group(:country).count, library: {pieSliceText: 'value-and-percentage'}

我尝试添加选项

library: {pieSliceText: 'value-and-percentage'}

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

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

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

pie_chart graph_data, { pieSliceText: 'value' }

但两者都不适合我。是否有新的语法?

编辑 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 的结构是什么,可能会导致一些问题。

UPDATE::在柱形图上

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

关于ruby-on-rails - rails ,Chartkick : Show values on the charts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45524226/

相关文章:

ruby-on-rails - 方法上的 Bootstrap 工具提示 => :delete link in Rails

ruby-on-rails - 我如何在 Rails 3 插件中测试路由?

ruby-on-rails - 使用 Chartkick 时无法摆脱背景图片

ruby - Chartkick Datepicker/Range Selector - 选择日期显示数据的可能性

ruby-on-rails - 如何配置oauth回调的路由

javascript - 工作完成后更新 Controller

ruby-on-rails - 使用 Chartkick 添加注释

javascript - 有新数据时如何更新图表?

javascript - Rails 语句中的“Escape” javascript 函数

sql - ActiveRecord 查找子资源的所有子资源