Question

我有这个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文件下的assets文件夹中，并将其包含在我的标头中，并将<%=raw @pie_gender %>替换为this.getAttribute('data-message')并将我的div替换为' ，但后来我收到一个javascript错误"getAttribute" does not exist for object window

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

我可能做错了什么？

修改

@pie_gender = [['Gender'，'Occurences'] ['M'，10] ['F'，5]]

基于google

的示例

编辑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);

Answer 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} %>

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

如何使这个JavaScript不引人注目？

1 个答案: