Question

我是网络开发的新手，我正在尝试创建一个Sinatra应用程序。在我的应用程序中，我有一个引用二维数组的实例变量，如下所示：

@my_var = [ ['NY', 55], ['NJ', 37] ]

我也在使用Google Charts API为我的数据创建一些可视化效果;特别是，我试图在我的视图中使用Geochart library创建一个美国各州的热图。

我想在我的模板中使用前面提到的数组（@my_var）来填充用于创建图表的Google DataTable。我的DataTable将有两列，第一列表示状态，第二列表示得分，我希望@my_var中的每个嵌套数组都映射到这两列，如下所示：

STATE     SCORE
NY        55
NJ        37

有人知道怎么做吗？据我所知documentation，您必须使用静态值填充表。我不确定如何将数据从我的应用程序（Ruby代码）传递给创建图表的过程（Javascript代码）。

为了使问题进一步复杂化，我正在用haml创建我的模板。到目前为止我所拥有的是：

%script{ :type => "text/javascript" }
  :plain
    google.load('visualization', '1', {'packages': ['geochart']});
    google.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() {
      var data = new google.visualization.DataTable();
      data.addRows(2);
      data.addColumn('string', 'State');
      data.addColumn('number', 'Score');
      data.setValue(0, 0, 'NY');
      data.setValue(0, 1, 55);
      data.setValue(1, 0, 'NJ');
      data.setValue(1, 1, 37);

      var options = {region:          'US',
                     resolution:      'provinces',
                     backgroundColor: '#CCC',
                     colors:          ['red','blue'],
                     width:           500,
                     height:          370};

      var container = document.getElementById('map_canvas');
      var geochart = new google.visualization.GeoChart(container);
      geochart.draw(data, options);
    };

使用正确的尺寸和图例中正确的颜色渲染地图。但是，我没有看到NY或NJ着色。还要注意我在这里使用静态值 - 我想在尝试动态创建表之前先退一步。

任何帮助将不胜感激。

Answer 1

我想出了如何填充表格。我使用Ruby插值将Ruby数组转换为Javascript数组，然后使用JS数组来填充DataTable，如下所示：

%script{ :type => "text/javascript" }
  :plain
    google.load('visualization', '1', {'packages': ['geochart']});
    google.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() {
      var data = new google.visualization.DataTable();

      var scores_by_state = #{@scores_by_state}
      data.addRows(scores_by_state.length)
      data.addColumn('string', 'State');
      data.addColumn('number', 'Average Score');

      for(var i = 0; i < scores_by_state.length; i++)
      {
        data.setValue(i, 0, scores_by_state[i][0]);
        data.setValue(i, 1, scores_by_state[i][1]);
      }

      var options = {region:          'US',
                     resolution:      'provinces',
                     backgroundColor: '#CCC',
                     colors:          ['red','blue'],
                     width:           500,
                     height:          370};

      var container = document.getElementById('map_canvas');
      var geochart = new google.visualization.GeoChart(container);
      geochart.draw(data, options);
    };

Sinatra到谷歌Geochart - 传递数据

1 个答案: