javascript - 带有谷歌图表的 Django

Question

我试图让谷歌图表显示在我的页面上，但我不知道如何将值从 django 视图传递到 javascript，以便我可以绘制图表。

姜戈代码：

array = ([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);
args['array']= array
return render_to_response('progress.html',args)

进度.html：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var djangoData = '{{array}}';
    var data = google.visualization.arrayToDataTable(djangoData);

    var options = {
      title: 'Company Performance'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

这样，图表就不会显示。有什么建议么 ？

Answer 1

google.visualization.arrayToDataTable() 似乎采用 2D (javascript) 数组。你传递的是一个字符串。您需要将其解析为数组。尝试：

var djangoData = JSON.parse('{{ array }}');
var data = google.visualization.arrayToDataTable(djangoData);

Answer 2

在您看来：

删除此行args['array']= array

将此行更改return render_to_response('progress.html',args) 为 return render_to_response('progress.html',{'array': json.dumps(array)})

在您的模板中：

将此行更改var djangoData = '{{array}}'; 为 var djangoData = '{{ array | safe }}';

您的其余代码都很好。我希望这有帮助。

Answer 3

对我来说，这种组合有效：

看法：

from django.shortcuts import render
import json

(...)
context= {'array': json.dumps(array)}
return render(request,'progress.html',context)

模板：

var djangoData = JSON.parse('{{ array | safe }}';);