0

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

 <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>
4

1 回答 1

2

注意：此答案假设您使用 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] ]所有值都在一个系列中。

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

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

希望这可以帮助！

于 2014-10-27T05:41:31.110 回答