Question

如何使用日期在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>

Answer 1

注意：此答案假设您使用的是Google图表作为图表库，就像您一样。

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] ]一个系列。

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

<%= 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]

希望这有帮助！

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

1 个答案:

x轴上的月份和年份：

Y轴上的值