5

我正在使用 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：看到这个之后，我尝试使用该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
4

1 回答 1

4

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

<% 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}}
于 2014-12-26T19:35:04.973 回答