JSON返回视图

Question

我正在尝试将django的views.py中的查询集传递给d3.js.

views.py:

def index（请求）： qs = DCPOWERSTATS.objects.all（）。values（'TS'，'PuE'）。order_by（'TS'） return render（request，'dashboard / dash.html'，context = qs}）

dash.html：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
             }

</style>
<div class="chart"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var data = {{ data_json }};

var x = d3.scale.linear()
          .domain([0, d3.max(data)])
          .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
  .data(data)
  .enter().append("div")
  .style("width", function(d) { return x(d) + "px"; })
  .text(function(d) { return d; });

 </script>

我需要在views.py和dash.html中进行更改，以创建类似于： https://bl.ocks.org/mbostock/3885304

之前的所有答案都令人困惑。我需要一个views.py以及dash.html的解决方案。我还需要知道将查询集结果发送到javascript的完美方式。

谢谢！

Answer 1

您需要将模型转换为普通列表/字典才能将它们转换为JSON。您决定在查询集上使用values()。还有django serialization。

尽管有序列化，但你有两个选择。

JSON返回视图

使用JsonResponse创建一个直接返回JSON数据的视图。

from django.http import JsonResponse

def index(request):
    qs = DCPOWERSTATS.objects.all().values('TS','PuE').order_by('TS')
    # slice the queryset to hit the database and convert into list
    return JsonResponse(qs[:])

您现在可以使用ajax调用在客户端加载此数据。

html（使用jQuery）

// assuming you have registered your view at '/dcpowerstats'
$.ajax({
  url: "http://example.com/dcpowerstats",  
  success: function(data) {
     console.log(data);
  }
});

将JSON传递给您的模板

或者您使用将JSON数据直接呈现到HTML模板中。在这种情况下，您应该将序列化数据添加到视图中并在那里使用模板标记。

查看

import json from django.shortcuts import render def index(request): qs = DCPOWERSTATS.objects.all().values('TS','PuE').order_by('TS') # slice the queryset to hit the database and convert into list context = {'data_json': json.dumps(qs[:])} return render(request, 'dashboard/dash.html', context=context)

<强> HTML

<script> var data = {{ data_json|safe }}; </script>

选择哪种方式取决于您的前端和偏好。

如果您只需要在视图javascript中提供一些静态数据，我会选择模板选项。

如果您的前端需要能够动态加载不同的东西并且数据量更大，请选择第二个选项。在这种情况下，我还会考虑使用django rest framework。

将json数据从django发送到d3.js

1 个答案:

JSON返回视图

将JSON传递给您的模板