Chartkick - Сложенный вертикальный график в процентах - PullRequest
Новая
       1

Chartkick - Сложенный вертикальный график в процентах

0 голосов
/ 05 февраля 2019

Я строю вертикальный график в процентах, следуя инструкции Google: https://developers.google.com/chart/interactive/docs/gallery/barchart#StackedBars

Вот как это должно выглядеть:

Good final graph

Тем не менее, вот как это выглядит сейчас.Wrong one

Я использую тот же data, что и в Google.

my_graph_controllers 

@data = [
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]

view / my_graph.html.erb 

<head>
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
<%= javascript_include_tag 'application' %>
</head>

<div class="container">

  <%= bar_chart @data, isStacked: true, isStacked: "percentage" %>

</div>

assets / javascripts / application.js 

//= require rails-ujs
//= require_tree .
//= require Chart.bundle
//= require chartkick
//= require highcharts

gemfile 

gem "chartkick"

1 Ответ

0 голосов
/ 05 февраля 2019

Таким образом, хитрость заключается в том, чтобы немного преобразовать данные. 

@data = [
      {
        name: "Fantasy & Sci Fi", 
        data: [["2010", 10], ["2020", 16], ["2030", 28]]
      },
      {
        name: "Romance", 
        data: [["2010", 24], ["2020", 22], ["2030", 19]]
      },
      {
        name: "Mystery/Crime", 
        data: [["2010", 20], ["2020", 23], ["2030", 29]]
      }
    ]

И тогда это работает как чудо: 

<%= bar_chart @data, stacked: true %>

Я нашел ответ в старом вопросе здесь .

Однако, если вы хотите использовать процентный стек, вам необходимо использовать хэш library для этого. 

<%= bar_chart @data, adapter: 'google', library: { isStacked: 'percent' } %>

Ps Обратите внимание, что для isStacked должно быть либо true , либо 'процентов' .Больше информации здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...