Ruby/Sinatraを使ってHighchartsにデータを渡す方が良いでしょうか？

Question

私は一般的には、それを修正しないでくださいが、この問題（私はこの問題への私の現在の解決策が壊れていない場合は、実際には醜いようです）。 Ruby、Sinatra、Haml、およびHighchartsを使用しています。Rubyでデータを取得してHighchartsに送信したいと考えています。

現在、私は本質的にはHighchartsのJavaScript全体から文字列オブジェクトを作成し、その中にルビデータを補間しています。これは機能しますが、私はこれとはまったく異なるアプローチをとるべきですか？

Rubyで変更できるいくつかのプロパティ（チャートのタイトル、データなど）を持つHighChartクラスを定義しました。 （！働く）以下の例は、デフォルトとして残りの部分を残して、これらのプロパティのうちの2つを設定します。

get '/' do 
     @chart = HighChart.new(options={ 
        :title_text => "Test Title", 
        :series_data => 
        { 
        'Calvin' => [10, 2, 17], 
        'Hobbes' => [11, 14, 6] 
        } 
        } 
       ) 
     haml :index 
    end 

私はビューのHAMLのJavaScriptフィルタ使用しています。これまでのところは良い

:javascript 
    #{@chart.chart_js} 

を。醜い部分はchart_jsメソッドです。私は単純に、HighChartのジャバスクリプトのフルテキストをコピーし、それを文字列としてで貼り付け、その後、コントローラで作成されたHighChartオブジェクトから変数をつかむためにRubyの補間を使用している：それは便利です

def chart_js 
     chart_js = " 
     var chart1; 
     $(document).ready(function() { 

    chart1 = new Highcharts.Chart({ 

    chart: { 

     renderTo: '#{render_to}', 

     type: '#{chart_type}' 

    }, 

    title: { 

     text: '#{title_text}' 

    }, 

    xAxis: { 

     categories: #{x_categories} 

    }, 

    yAxis: { 

     title: { 

      text: '#{y_categories}' 

     } 

    }, 

    series: [#{get_data_js(series_data)}] 

    }); 

}); 
    " 
end 

そして、念のために、ここでHighChartのオブジェクトクラス定義の最初の部分です：

class HighChart 
attr_accessor :render_to, :chart_type, :title_text, :x_categories, 
       :y_categories, :series_data 

    def initialize(options={}) 
     self.render_to = options[:render_to] || 'container' 
     self.chart_type = options[:chart_type] || 'bar' 
     self.title_text = options[:title_text] || 'Fruit Consumption' 
     self.x_categories = options[:x_categories] || ['Apples', 'Bananas', 'Oranges'] 
     self.y_categories = options[:y_categories] || 'Fruit eaten' 
     self.series_data = options[:series_data] || {'Jane' => [1, 0, 4], 
                'Bobbert' => [5, 7, 3], 
                'Zach' => [10, 2, 1] 
                } 
    end 

Answer 1

あなたは、具体的Highcharts JSのためのビューを作成し、そのインスタンス変数（例えば@render_to、@chart_typeなど。）使用することができます。コードをそれほどクリーンアップすることはできませんが、あなたのコントローラに大きなビューの文字列を持つことの「間違い」を取り除くでしょう。

基本的には他にもできることはありませんが、サーバー側の情報がたくさんあり、特定のHighcharts形式でクライアントに書き込まなければなりません。それを回避するだけのことはありません。

私が提供できる他の唯一の提案は、中間のJS変数を使用することです。これはJSのすべてのビューを（JSのみのビューなしで）ビューに保持させ、JS変数を設定する必要があります。これは、次のようになります。

var RENDER_TO = "@render_to"; 
var CHART_TYPE = "@chart_type"; 
// ... 
$(document).ready(function() { 
    chart1 = new Highcharts.Chart({ 
    chart: { 
     renderTo: RENDER_TO, 
     .... 

さて、これは実際にはより多くのコードが含まれ、それはあなたが完全にサーバー価値の書き込みコードからごonReadyコードを分離させます。

希望に役立ちます。