[英]Chartkick - Stacked vertical graph in percentage
我正在按照Google指令构建垂直百分比图: https : //developers.google.com/chart/interactive/docs/gallery/barchart#StackedBars
它应该是这样的:
我正在使用与Google相同的data
。
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, '']
]
视图/ 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>
资产/ Java脚本/ application.js中
//= require rails-ujs
//= require_tree .
//= require Chart.bundle
//= require chartkick
//= require highcharts
的Gemfile
gem "chartkick"
因此,诀窍是稍微转换数据。
@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 %>
我在这里的一个较旧的问题中找到了答案。
但是,如果你想要做的百分比堆栈,你需要使用库散了点。
<%= bar_chart @data, adapter: 'google', library: { isStacked: 'percent' } %>
Ps注意,对于isStacked ,它应该为true或“ percent” 。 更多信息在这里 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.