在rails應用中使用谷歌圖表API - 如何在使用arrayToDataTable指定系列中的空值（缺失）

Question

我的應用程序圖表使用谷歌圖表api的4個數據系列。控制器加載一個數組，視圖有谷歌圖表javascript來繪製購物車。

它適用於數組是完全填充的，但當然有時一個數據系列缺少幾個點，我看不到如何在一個系列中指定'丟失'數據點，所以arrayToDataTable（）函數將知道提供該點的'空'數據。

以我控制器，I加載具有數據的陣列（完全填充陣列爲例）：

@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   

對於完全填充陣列，它工作正常。

有誰知道該怎麼把ruby數組，所以arrayToDataTable知道它是一個空值（缺少）？

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

我已經試過nil'nil''null''_''__'所有這些都打破了圖表。

Answer 1

回答結果是平凡簡單...

a）在該紅寶石側，在JavaScript，使陣列中時使用零

b）中，代替@typed_array，使用@ typed_array.to_json

以我控制器，I加載具有數據的陣列（完全填充陣列爲例）：

@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