0

現在、RAILS アプリケーションでグラフを作成するために Highcharts を実装しています。レイジー ハイ チャート ジェムを使用して、よりクリーンにしています。これはうまくいきます。グラフはうまく機能します。残念ながら、クリック イベントのようなカスタム js イベントの追加など、gem でサポートされていないことがいくつかありました。ビューに追加のオプション コードを追加する必要があります。

以下の関連コードを表示できます。コメントアウトされたクリックイベントは正常に機能します。このクリック イベントは、ブラウザの警告ウィンドウを正常に表示します。その下の js テキストの大きなブロックは、実装したいより高度なクリック イベントです。残念ながら、以下のエラーが発生します。RAILSがjsテキストを解析しようとしているためだと思いますか? 私はそれを解決することはできません。

<%= high_chart("my_id", @h) do |c| %>
    <%= #"options.series[4].point.events.click = function() {alert ('Category: ');}" %>
    <%= render :js => %{ 
            options.series[4].point.events.click = 
                function() {
                        hs.htmlExpand(null, {
                            pageOrigin: {
                                x: this.pageX,
                                y: this.pageY
                            },
                            headingText: this.series.name,
                            maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' + this.y + ' visits',
                            width: 200
                        });
                    }
                } %>
<% end %>

エラー：

/home/scott/flux/app/views/cognos_mn_tickets/pbadata.html.erb:22: syntax error, unexpected ',', expecting ')'
...ext: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/>...
...                               ^
/home/scott/flux/app/views/cognos_mn_tickets/pbadata.html.erb:22: unknown type of %string
... Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+t...
...
4

1 に答える 1

1

問題は、文字列を%{then で開始する}と、JavaScript コードの途中にある次の文字列で終了することです。代わりにHeredoc構文を使用してみてください。

<%= high_chart("my_id", @h) do |c| %>
  <%= <<-END
      options.series[4].point.events.click = function() {
        hs.htmlExpand( null, {
          pageOrigin      : { x: this.pageX, y: this.pageY },
          headingText     : this.series.name,
          maincontentText : Highcharts.dateFormat('%A, %b %e, %Y', this.x) +
                            ':<br/> ' + this.y + ' visits',
          width           : 200
        } );
      }
    END
  %>
<% end %>
于 2012-05-09T01:42:49.397 に答える