0

我有这个javascript代码，来自我视图底部的谷歌图表api：

<div id='visualization'></div>
...
<script type="text/javascript">
function drawVisualization() {
        // Create and populate the data table.

        var data = google.visualization.arrayToDataTable(<%=raw @pie_gender %>)

        // Create and draw the visualization.
        new google.visualization.PieChart(document.getElementById('visualization')).
            draw(data, {title:"Men and Women"});
      }
      google.setOnLoadCallback(drawVisualization);
</script>

我试图将此 js 代码放在我的资产文件夹中的 .js 文件下，并将其包含在我的标题中，以及替换<%=raw @pie_gender %>为this.getAttribute('data-message')并将我的 div 设置为'，但随后我收到一个 javascript 错误"getAttribute" does not exist for object window

我也尝试将我的数组作为输入参数传递，例如 : onload="drawVisualization(<%=raw @pie_gender %>)，但后来我得到“错误：不是数组”

我可能做错了什么？

编辑

@pie_gender = [['性别', '出现次数']['M', 10]['F', 5]]

基于谷歌的例子

编辑 2 如果我打印 json 输出

<% logger.debug "Pie Gender : #{@pie_gender.to_json}" %>
        <div id="visualization" onload="drawVisualization(<%= @pie_gender.to_json %>)" > </div>

，看起来还不错：

Pie Gender : [["Gender","Receipts"],["",25000],["F",8658]]

但似乎在将它作为参数发送给我的 js 函数时发生了一些事情，因为它仍然说消息不是数组：

function drawVisualization(message) {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable(message);

        // Create and draw the visualization.
        new google.visualization.PieChart(document.getElementById('visualization')).
            draw(data, {title:"Men and Women"});
      }
      google.setOnLoadCallback(drawVisualization);
4

1 回答 1

1

为了解决这个问题，我将我的 javascript 代码插入了部分

_googlescript.html.erb

<script type="text/javascript">
function drawVisualization() {
        // Create and populate the data table.

        var data = google.visualization.arrayToDataTable(<%=raw data_array %>)

        // Create and draw the visualization.
        new google.visualization.PieChart(document.getElementById('visualization')).
            draw(data, {title:"Men and Women"});
      }
      google.setOnLoadCallback(drawVisualization);
</script>

在我看来，我在页面底部呈现了部分，并删除了 onload，这似乎没有做任何事情......：

<div id="visualization" > </div>
...
<%= render partial: 'shared/googlescript', locals: {data_array:@pie_gender} %>

现在我可以再次看到图表......但我仍然觉得我的问题有更好的答案。

于 2012-08-07T10:11:03.397 回答