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

这就是它的样子：

基本思想是，蓝色是用户输入的内容，红色是他们的目标，黄色以一种“趋势线”形式加入用户最近进入的目标。我想自定义趋势线，使其没有端点 (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因为它最容易输入），但这也没有用，我得到了错误信息。这是我的代码：

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