0

我的应用程序使用 google chart api 绘制了 4 个数据系列。控制器加载一个数组，视图有谷歌图表 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  

对于一个完全填充的数组，它工作正常。

有谁知道在 ruby​​ 数组中放入什么所以 arrayToDataTable 知道它是一个空（缺失）值？

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

我已经尝试nil 'nil' 'null' '_' '__'了所有打破图表的方法。

4

1 回答 1

1

答案原来是微不足道的简单...

a) 在红宝石方面，使用 nil

b) 在 javascript 中，当传入数组时，使用 @typed_array.to_json 而不是 @typed_array

在我的控制器中，我加载了一个包含数据的数组（完全填充的数组示例）：

@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 回答