标签: chartkick
Rails chartkick堆积条形图
我正在尝试使用Rails Chartkick gem 创建堆积条形图,我正在使用Google图表API.
我使用此行使用chartkick生成条形图.
<%= bar_chart data, :library => {:isStacked => true} %>
但我得到的是一个简单的条形图而不是堆叠的条形图.我的问题是我应该传递给data参数的数据结构是什么.我试过传递一个数组,比如(来自谷歌图表样本)
[['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General','Western', 'Literature', { role: 'annotation' } ],['2010', 10, 24, 20, 32, 18, 5, '']]
但它不起作用.
推荐指数
解决办法
查看次数
Chartkick饼图在使用库选项时未显示百分比
在我的ROR中,我想将Percentages添加到我的Piechart中,我正在使用chartkickgem来渲染饼图.我已经尝试了各种方法解决这个问题,但似乎没有办法.我也用Google搜索并查看堆栈溢出时的类似帖子.
这是我想出来的,但它没有显示%.
<%= pie_chart [["Soccer", @soccer_total], ["Basketball", @basketball_total, ["Baseball", @baseball_total], ["Other", @other_total ]], library: {legend: {labelFormat: '{name} : {y} ({percentage}%)'}} %>
我也试过这种方法,但还是运气不错
<%= pie_chart [["Soccer", @soccer_total], ["Basketball", @basketball_total, ["Baseball", @baseball_total], ["Other", @other_total ]], library: {pieSliceText: 'value-and-percentage'} %>
请更有经验的人帮助我吗？
更新OSCAR的答案
我按照奥斯卡答案提供的指示,但仍未显示%.
这是怎么<head>的 application.html.erb样子:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "path/to/highcharts.js", "chartkick" %>
这appplication.js是这样的:
//
//= require jquery
//= …推荐指数
解决办法
查看次数
Rails chartkick:只需要轴上的整数值.使用离散或其他什么？
说我有以下代码
<% data = [
[1,1],[2,3],[3,5],[4,8],[6,4],[7,2]
] %>
<%= line_chart data, {discrete: true, library: {width: 600} }%>
使用chartkick,这将生成以下图表
我希望使用整数标记垂直轴.(不是小数)我认为该discrete选项应该这样做但是对于这个例子它所做的只是改变水平轴上元素的格式从时间到数字(即下面的代码
<%= line_chart data, {library: {width: 600} }%>
产生这个
).
所以我的问题是:discrete除了将实际数字的日期更改为数字之外,究竟做了什么.如何使用它来使垂直轴上的数字整数？(或者,如果不能用它来做,我可以使用什么？)
推荐指数
解决办法
查看次数
Rails + Chartkick:如何更改工具提示的日期格式？
我通过这种方式生成图表(使用Google Chart):
<%=
area_chart [{:name => "Sold items", data: @items.group(:created_at).count}], :library => {hAxis: {title: "Period"}, vAxis: {title: "Amounts in UDS"}, title: "History Of Sales"}
%>
并且图表很好地生成了,但是我想要改变一件事 - 工具提示看起来像这样:
工具提示中的信息是正确的,但我不想在2014年10月19日上午2:00:00显示,我希望仅显示2014年10月19日.
有没有办法用Chartkick做到这一点？
非常感谢您的宝贵时间.
javascript ruby ruby-on-rails google-visualization chartkick
推荐指数
解决办法
查看次数
Rails Chartkick Gem错误加载图表找不到适配器
我有一个Rails 3.2.14应用程序,我正在使用chartkick和groupdategem来尝试生成一些基本的图表.
当我加载我的视图时,我收到错误:
Error Loading Chart: No adapter found
这是我的视图代码的样子:
index.html.erb
<%= line_chart Call.group_by_week(:created_at).count %>
这是我的应用程序布局,包括chartkick和让步chart_js application.html.erb(布局)
<%= javascript_include_tag "application", "chartkick" %>
<%= yield :charts_js %>
任何人都可以告诉我为什么我得到这个错误以及如何解决它？我真的很想开始使用Chartkick生成一些简单的图表.
推荐指数
解决办法
查看次数
Rails Active Admin + Chartkick =不工作？
我试图使用Chartkick生成显示在rails主动管理仪表板上的图形.这是我正在使用的教程:http://www.patrickedelman.com/simple-charting-for-activeadmin/
但是,图表没有显示,而是显示"正在加载..."
我已经安装了javascript_include_tag"//www.google.com/jsapi","chartkick"和gem chartkick,但它仍然无效.
请帮忙!谢谢.
推荐指数
解决办法
查看次数
如何使用Chartkick在Rails中混合列和折线图？
推荐指数
解决办法
查看次数
Chartkick列图表多种颜色
我在我的RoR项目中使用chartckick来生成图表,这非常好用.(以及Google Charts).
我创建了一个柱形图与只有2条(男性和女性).
现在客户想要每个酒吧都有不同的颜色？那可能吗？
我看过这篇文章 - 如何更改用Chartkick创建的柱形图的颜色？但它已经超过了一半的年龄,我希望现在有办法为酒吧指定更多的颜色.
更新
我的代码看起来像:
调节器
@followers_gender_count = Project.find(params[:id]).followers.group(:gender).count
视图
<%= column_chart parse_gender_data(@followers_gender_count) %>
帮手
def parse_gender_data(data)
gender_data = Hash.new
gender_data[:male] = data[1]
gender_data[:female] = data[2]
({ 'Male' => gender_data[:male], 'Female' => gender_data[:female] })
end
更新2 - GitHub上的问题
推荐指数
解决办法
查看次数
如何使用Chartkick在Google Charts中自定义图例
我正在使用Chartkick在Ruby-on-Rails项目中显示一些statisitcs数据.Chartkick基于Google Charts.有没有办法在图表的图例中自定义数据输出？
例如:
= pie_chart User.get_country_statistic, library: {legend: {position: "left"}, chartArea: {left:0, width:'100%'}}
它给
但是我需要这样的东西:
也就是传说中的更多信息.我怎么能得到它？
推荐指数
解决办法
查看次数
有没有办法在非顺序轴上包含刻度线/网格线？另外，是否可以添加边框样式和自定义刻度位置？
因此，Google Charts API即将被弃用，我们正从它迁移到chartkick + chart.js。
我刚刚加入这个项目，只是换了一个开发团队，所以我还很陌生，这使事情变得更加复杂。
无论如何，例如，在使用Chart.js时，在保持与旧图形相同的样式方面遇到了一些问题，例如：
根据客户的说法，旧的图表（下面是检查图像，以获取更多上下文）具有一些必不可少的元素，我无法复制：
- 两个V轴标签，一个在上面，一个在下面。
- X轴的未堆积值（例如，如果x轴有两个“ 1”值，则它们最终会堆积，这是我不希望的）
- X轴无序
- 自定义刻度线和刻度线宽度
- 自定义边框（顶部和底部的灰线）
- 垂直网格
我尝试使用Chart.js中的多个选项，包括ticks:，gridlines和stacked: false，在几种不同的配置中使用，但到目前为止，还没有骰子。
这是我正在使用的当前代码（包括一些数据McGyverism）来显示图表：
line_chart data,
library: {
showLines: true,
tooltips: { enabled: false },
title: {
display: true,
text: graph_title(graph_number, type),
fontSize: 11
},
scales: {
yAxes: [{
ticks: {
display: false,
stepSize: steps,
}
}],
xAxes: [{
ticks: {
display: ticks,
fontSize: 9,
fontStyle: 'bold'
}
}]
}
}
McGyverism提到的数据（用于显示标签）可以避免堆叠/问题：
["D: #{label_value}": calculated_value],
["I: #{label_value}": calculated_value]...
如果有帮助，请使用以下旧的API调用参数：
标签值为d2，i2，s2和c2，而d，i，s，c为实际图形点（在显示标签之前已对标签进行了一些计算） …
推荐指数
解决办法
查看次数