从Django传递值到Google Charts DataTable

Question

我正在尝试把一个变量从我的Django视图传递到JavaScript，想把它作为一个二维数组来填充谷歌图表的数据表。

有人能解释一下为什么这个方法有效：

var data=new google.visualization.arrayToDataTable([[1,2,3],
                                                    [4,5,6]])

而这个方法却不行：

foo = [[1,2,3], [4,5,6]]
foo = json.dumps(foo) # the foo stuff is in the django view. i'm just trying to be clear as to what foo is.

var data=new google.visualization.arrayToDataTable({{ foo|safe }})# i've tried this with quotes and without safe. both as json and not. 

我尝试过：

foo = [json.dumps(i) for i in foo]

我甚至尝试过不使用JSON。我试过传递numpy数组、元组。我还尝试用data.addRows来填充数据表，也试过遍历数据并使用data.addRow。还有其他一百种方法……

显然，我漏掉了一些重要的东西，因为我做的事情都没有成功。

为什么当我把数据硬编码到数据表里时它能工作，但当我试图从我的Django视图传递同样的数据时却失败了呢？

任何帮助都将不胜感激，因为我快要用尽谷歌的蓝色链接了……

Answer 1

根据我的经验，下面这个例子应该可以正常工作。

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var djangodata = {{djangodict|safe}};
    var data = google.visualization.arrayToDataTable();
    var options = {
        title: 'My Daily Activities'
        };
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
  }

在你的视图中，我想你可以写成下面这样；

dictdata=[
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
    ]
return render_to_response{template,
                         'djangodict': json.dumps(dictdata),
                         .... other variables here
                         }

如果你正在为这个图表单独创建一个模板的话，这样应该没问题。不过，像上面那样在脚本中声明django变量是非常重要的。

var djangodata = {{djangodict|safe}};

如果你不这样做，可能一切都不会正常工作 :-(

不过，我做的事情和上面的解决方案有点不同。我实际上创建了一个模板标签，用来把数据变量传递给上面的JavaScript，让它按照我想要的方式绘制图表。

这样做是因为我想把我的图表放在仪表盘页面上，这样就能正常工作了！