Rails chartkick：在多系列折线图中自定义单独的曲线？

Question

我使用chartkick制作一个包含以下代码的多系列折线图：

<%= line_chart [
    {name: @track.name, data: records_of_track(@track).map{|record| [record.time_entered, record.entry]}},
    {name: "Goal", data: [[@track.goal_by, @track.goal]]},
    {name: "Goal trend line", data: [[most_recent_record(@track).time_entered, most_recent_record(@track).entry], [@track.goal_by, @track.goal]]}
    ]%>

这就是它的样子：

基本思想是蓝色是用户输入的内容，红色是他们的目标，黄色加入用户的最近进入目标的趋势线＆＆＃34; ＃34 ;.我想自定义趋势线没有端点（pointSize: 0）和虚线（lineDashStyle: [5,5]），而不是其他两个端点。我试过这个

<%= line_chart [
    {name: @track.name, data: records_of_track(@track).map{|record| [record.time_entered, record.entry]}},
    {name: "Goal", data: [[@track.goal_by, @track.goal]]},
    {name: "Goal trend line", data: [[most_recent_record(@track).time_entered, most_recent_record(@track).entry], [@track.goal_by, @track.goal]] , library:  {pointSize: 0, lineDashStyle: [5,5]}}
    ]%>

但由于我获得了与之前相同的输出并且尝试了这个

，因此无法正常工作

<%= line_chart [
    {name: @track.name, data: records_of_track(@track).map{|record| [record.time_entered, record.entry]}},
    {name: "Goal", data: [[@track.goal_by, @track.goal]]},
    {name: "Goal trend line", data: [[most_recent_record(@track).time_entered, most_recent_record(@track).entry], [@track.goal_by, @track.goal]]}
    ] , library:  {pointSize: 0, lineDashStyle: [5,5]} %>

但是这使得所有的线都破了，并且消失了所有的点，正如预期的那样：

那么如何使这些属性仅适用于一条曲线而不适用于另外两条曲线？如果没有直接的chartkick实现，知道我如何只使用谷歌图表来做这件事也会有所帮助。只要我获得功能！

-

编辑1：看到this后，我尝试使用series选项更改某些参数（此处为lineWidth，因为它最容易输入），但这也没有＆＃ 39;工作，我收到了一条错误信息。这是我的代码：

<%= line_chart [
    {data: [[most_recent_record(@track).time_entered, most_recent_record(@track).entry], [@track.goal_by, @track.goal]]},
    {name: @track.name, data: records_of_track(@track).map{|record| [record.time_entered, record.entry]}},
    {name: "Goal", data: [[@track.goal_by, @track.goal]]}

] , library:  library_settings %>

带

<% library_settings = {
    width: 600,
    vAxis: {ticks: choose_ticks(@track)},
    colors: ['ff9900', '3366cc', 'dc3912'],
    series: {
        0: {lineWidth: 1},
        1: {lineWidth: 2},
        2: {lineWidth: 10}
    }
} %>

但我只收到了错误

....html.erb:16: syntax error, unexpected ':', expecting => 0: {lineWidth: 1}, ^ ....html.erb:16: syntax error, unexpected ',', expecting keyword_end ....html.erb:17: syntax error, unexpected ',', expecting keyword_end ....html.erb:19: syntax error, unexpected '}', expecting keyword_end

Answer 1

看来你现在正处于正确的道路上。您现在获得的语法错误应该通过以下方式修复：

<% library_settings = {
    width: 600,
    vAxis: {ticks: choose_ticks(@track)},
    colors: ['ff9900', '3366cc', 'dc3912'],
    series: {
        0 => {lineWidth: 1},
        1 => {lineWidth: 2},
        2 => {lineWidth: 10}
    }
} %>

变量library_settings是一个ruby哈希值，在ruby中，允许使用数字键进行哈希，但它们必须使用 hashrocket 语法，而不是新的冒号语法。澄清：

2.1.2 :001 > { 0: {lineWith: 1} }
SyntaxError: (irb):1: syntax error, unexpected ':', expecting =>
{ 0: {lineWith: 1} }
    ^
(irb):1: syntax error, unexpected '}', expecting end-of-input

但是

2.1.2 :002 > { 0 => {lineWith: 1} }
=> {0=>{:lineWith=>1}}