如何使用日期查看 x 轴上的月份和年份？和y轴的值？用图表踢答案

【问题标题】：How can I see the month and year in x axis with a Date? and values in y axis? with chartkick如何使用日期查看 x 轴上的月份和年份？和y轴的值？用图表踢
【发布时间】：2014-10-25 07:31:34
【问题描述】：

如何使用日期在 x 轴上查看月份和年份？和y轴的值？用chartkick

 <div class="panel-body">

 <%= line_chart [{name: "Cantidad de voluntarios en estado activo", 

        data: [Time.new, '20'] },

       {name: "Study", data: [Time.new, '30'] }, <!-- # How can I do that with it? -->


       {name: "Conversation", data: [Time.new, '50'] } ]

        , {library: {hAxis: {title: "Tiempo"}, vAxis: {title: "Valores"}}} %>

</div>

【问题讨论】：

标签： ruby-on-rails-4 chartkick

【解决方案1】：

注意：此答案假设您使用 Google Charts 作为图表库，看起来就像您一样。

x 轴上的月份和年份：

添加选项：

library: {:hAxis=>{:format=>'MMM y'}}

如果您访问Google Charts Documentation，您将看到有关 hAxis.format 的部分。他们解释说他们的格式类似于 ICU 模式集（参见 http://icu-project.org/apiref/icu4c/classSimpleDateFormat.html#_details）。

Y 轴上的值

我认为您的问题是您的 data: 选项格式不正确。（1）我会让你的值整数而不是字符串（不确定这是否重要），以及（2）你的键/值有点偏离（这绝对很重要）。您可以作为散列传递，例如data: {Time.new => 20}，也可以作为数组传递，除了您需要嵌套数组，例如data: [ [Time.new, 20] ]。这是因为因为它是一个折线图，所以你可以有很多很多值，即[ [Time.new, 20], [Time.new, 30], [Time.new, 40] ] all in a series。

所以，这就是我重构您的代码的方式：

<%= line_chart [
    {name: "Cantidad de voluntarios en estado activo", data: {Time.new => 20} },
    {name: "Study", data: {Time.new => 30} },
    {name: "Conversation", data: {Time.new => 50} } ],
    {library: {hAxis: {title: "Tiempo", format: 'MMM y'}, vAxis: {title: "Valores"}}} %>

最终看起来像这样：

[我显然不能发布图片，但你可以在这里找到它：http://i.stack.imgur.com/TTVgP.png]

希望这会有所帮助！

【讨论】：