首页 > 解决方案 > Django 将数据传递到 Google Charts

问题描述

我在 views.py 中有一个视图,如下所示。我正在按照图表中的要求传递数据

def home(request): 

     posts = [['day', 'ic'], ['Fri', 3601326.0], ['Mon', 1450340.0], ['Sat', 2094946.0], ['Sun', 2373750.0], ['Thu', 3116066.0], ['Tue', 729403.0], ['Wed', 1934780.0]]
     return render(request, 'kodey/home.html', {'data': posts})

在 HTML 中,我有以下内容,但该图表未显示。如果我在文档中传递相同的数据,它确实如此,所以我有点困惑,

谁能帮我?

谢谢

<script type="text/javascript">

    google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

      var data2 = google.visualization.arrayToDataTable(
              {{ data }}              
      );

      var options = {
            chartArea: {
        left: 50,
        top: 5,
        right: 5,
        bottom: 50,
        width: 500,
        height: 300
    },
        hAxis: {
          title: 'Average Interactions',
          minValue: 0
        },

      };

      var days = new google.visualization.BarChart(document.getElementById('days_div'));

      days.draw(data2, options);
}</script>

标签: djangogoogle-visualization

解决方案


这不是有效的 JSON blob。您可以将其转换为jsonblob,例如使用json.dumps(…)[Django-doc]

import json

def home(request): 
     posts = [['day', 'ic'], ['Fri', 3601326.0], ['Mon', 1450340.0], ['Sat', 2094946.0], ['Sun', 2373750.0], ['Thu', 3116066.0], ['Tue', 729403.0], ['Wed', 1934780.0]]
     return render(request, 'kodey/home.html', {'data': json.dumps(posts)})

在模板中,您可以使用|safe模板过滤器添加 JSON blob以避免 HTML 对其进行转义:

var data2 = google.visualization.arrayToDataTable(
    {{ data|safe }}              
);

推荐阅读