简体   繁体   中英

Rails, Chartkick: Show values on the charts

The Chartkick gem lets you create many kinds of charts. Currently, my charts look like this:

pie_chart @institutions

在此输入图像描述

column_chart @stats

在此输入图像描述

I want that values are shown on the charts. In the pie chart, I want the number 244 and 43 be visible in or outside of the pie chart. In the column chart, I'd like to have the values on top or in the column. Is this somehow possible?

Regarding to the pie chart, there is already a stackoverflow-question , but the accepted answer does nothing for me:

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

I tried to add the option

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

but nothing changed. What am I doing wrong? Is there maybe an option or setting that I am missing?

There is another, similar stackoverflow-question , in which following solutions were proposed:

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

and

pie_chart graph_data, { pieSliceText: 'value' }

But both didn't work for me. Is there maybe a new syntax?

EDIT 1:

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

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

gives me this:

在此输入图像描述

EDIT 2: Chartkick proposes 3 ways to install Chartkick. I chose the first one with Chart.js. Due to the helpful comments, I now installed the second way. Now, my Pie-Charts have numbers shown.

I tried this and it is working fine

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

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

在此输入图像描述

What is the structure of @institutions , may be that's causing some issue.

UPDATE:: on column chart

The GH for chartkick says there is no official support for showing data on each column yet https://github.com/ankane/chartkick.js/issues/38#issuecomment-271117774

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM