如何使用 Chartkick 在 Rails 中混合柱形图和折线图？答案

【问题标题】：How can I mix a column and line chart in Rails using Chartkick?如何使用 Chartkick 在 Rails 中混合柱形图和折线图？
【发布时间】：2014-03-19 20:32:55
【问题描述】：

我想在我的 rails 应用程序中显示图表。我能够找到很多可以做到这一点的项目，例如Chartkick。但我想要像this one 这样的图表，我在其中最大化行和列。有没有可以绘制这种图表的项目？我无法在 chartkick 的网站或 Google 上找到任何内容。

【问题讨论】：

标签： ruby-on-rails chartkick

【解决方案1】：

你可以使用 chartkick 来做到这一点：

= column_chart(@your_data, library: { :series => { 0 => { type: "line"} } })

这会将@your_data 中的第一个系列设置为折线图。当然，您也可以设置其他所有系列，也可以将“0”换成另一个数字。

我希望这会有所帮助！

【讨论】：

也许你可以在 javascript 中展示它的样子？
我无法让它工作。 this 似乎与之矛盾：“Chartkick 目前不支持任何类型的组合图表。”
它不能与chartkick gem 一起使用，还有运气吗？ @klenwell
@klenwell 确实有效，但您需要添加：adapter: 'google', library:... 并且您需要：javascript_include_tag "https://www.gstatic.com/charts/loader.js"

【解决方案2】：

这可以在 Javascript 中使用类似的东西来完成：

new Chartkick.AreaChart("chart", [{"name":"Series 1","data":{"2013-03-11 00:00:00 -0700":3,"2013-03-31 00:00:00 -0700":5}},{"name":"Series 2","data":{"2013-02-10 00:00:00 -0800":0,"2013-02-17 00:00:00 -0800":0}},{"name":"Series 3","data":{"2013-02-10 00:00:00 -0800":0,"2013-02-17 00:00:00 -0800":1}}], { library: { series: { 0: { color: "blue" }, 1: { type: "line", color: "yellow" }, 2: { type: "line", color: "green" } } } }  );

系列 2 和系列 3 将排列，系列 1 将是面积图。 :)

（这主要是对JNM关于Timo的回答的问题的回应，但我暂时无法回复cmets。：/）

【讨论】：

【解决方案3】：

Google Visualization Combo charts 应该可以做你想做的事情

查看documentation 了解更多信息

Js Fiddle

【讨论】：