0

私のアプリは、Google チャート API を使用して 4 つのデータ シリーズをチャート化します。コントローラーは配列をロードし、ビューにはカートを描画するための Google チャート JavaScript があります。

配列が完全に取り込まれている場合は機能しますが、もちろん、データ系列にいくつかのポイントが欠落している場合があり、系列で「欠落している」データポイントを指定する方法がわからないため、arrayToDataTable() javascript 関数は「null」を提供することを認識しますそのポイントのデータ。

私のコントローラーでは、配列にデータをロードします (完全に入力された配列の例):

@typed_array = [["Month", "Apples", "Bananas", "Cherries", "Oranges"], 
  ["Jan", 5.0, 4.0, 3.0, 7.0], 
  ["Feb", 6.0, 3, 3.0, 7.0], 
  ["Mar", 7.0, 5.0, 4.0, 6.0], 
  ["Apr", 8.0, 5.0, 4.0, 5.0], 
  ["May", 9.0, 6.0, 5.0, 4.0]]

ビューには次が含まれます。

%script{:src => "https://www.google.com/jsapi", :type => "text/javascript"}
:javascript
  google.load('visualization', '1.0', {'packages':['corechart']});

  google.setOnLoadCallback(drawChart);

  function drawChart() {

    // Create the data table.
    var data = new google.visualization.arrayToDataTable(#{@typed_array});

    // Set chart options
    var options = {'title':'Report 1: ',
         backgroundColor: { fill: "#fee", stroke: "#246", strokeWidth: 2 },
         'width':800,
                   'height':300,
                   'interpolateNulls':true};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div_line1'));
    chart.draw(data, options);
  }

#chart_container
  %p  
  #chart_div_line1{:style=>"padding:20px;"}
  %p  

完全に配置されたアレイの場合、正常に機能します。

arrayToDataTable が null (欠落) 値であることを認識できるように、ruby 配列に何を入れるかを知っている人はいますか?

  ["Feb", 6.0, ????, 3.0, 7.0],

nil 'nil' 'null' '_' '__'チャートを破るすべてを試しました。

4

1 に答える 1

1

答えは自明であることがわかります...

a) ルビー側では、nil を使用

b) JavaScript で配列を渡す場合、@typed_array の代わりに @typed_array.to_json を使用します。

私のコントローラーでは、配列にデータをロードします (完全に入力された配列の例):

@typed_array = [["Month", "Apples", "Bananas", "Cherries", "Oranges"], 
  ["Jan", 5.0, 4.0, 3.0, 7.0], 
  ["Feb", nil, 3, 3.0, 7.0], 
  ["Mar", nil, 5.0, 4.0, 6.0], 
  ["Apr", 8.0, nil, 4.0, 5.0], 
  ["May", 9.0, 6.0, nil, 4.0]]

ビューには次が含まれます。

%script{:src => "https://www.google.com/jsapi", :type => "text/javascript"}
:javascript
  google.load('visualization', '1.0', {'packages':['corechart']});

  google.setOnLoadCallback(drawChart);

  function drawChart() {

    // Create the data table.
    var data = new google.visualization.arrayToDataTable(#{@typed_array.to_json});

    // Set chart options
    var options = {'title':'Report 1: ',
         backgroundColor: { fill: "#fee", stroke: "#246", strokeWidth: 2 },
         'width':800,
                   'height':300,
                   'interpolateNulls':true};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div_line1'));
    chart.draw(data, options);
  }

#chart_container
  %p  
  #chart_div_line1{:style=>"padding:20px;"}
  %p  
于 2012-10-16T03:00:53.837 に答える