Fatal编程技术网
  • python/
  • Python 将json数据从django发送到d3.js

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

python django d3.js

Python 将json数据从django发送到d3.js,python,django,d3.js,data-visualization,Python,Django,D3.js,Data Visualization,我正在尝试将django的views.py中的查询集传递给d3.js views.py： def索引（请求）： qs=DCPOWERSTATS.objects.all（）.values（'TS'，'PuE'）。order_by（'TS'）） 返回呈现（请求'dashboard/dash.html'，context=qs}） dash.html： <!DOCTYPE html> <meta charset="utf-8"> <style> .chart div

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

views.py：

def索引（请求）： qs=DCPOWERSTATS.objects.all（）.values（'TS'，'PuE'）。order_by（'TS'）） 返回呈现（请求'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>


.海图组{
字体：10px无衬线；
背景颜色：钢蓝色；
文本对齐：右对齐；
填充：3倍；
保证金：1px；
颜色：白色；
}
var data={{data_json}}；
var x=d3.scale.linear（）
.domain（[0，d3.max（数据）]）
.范围（[0420]）；
d3.选择（“图表”）
.selectAll（“div”）
.数据（数据）
.enter（）.append（“div”）
.style（“宽度”，函数（d）{返回x（d）+“px”；}）
.text（函数（d）{return d；}）；
我需要在views.py和dash.html中进行更改，以创建如下内容：

前面所有的答案都令人困惑。我需要一个针对views.py和dash.html的解决方案。我还需要知道将queryset结果发送到javascript的完美方法

谢谢

您需要将模型转换为普通列表/字典，以便能够将它们转换为JSON。您决定在查询集上使用
values（）
。还有

尽管序列化，但这里有两个选项

JSON返回视图 或者使用创建直接返回JSON数据的视图

现在可以使用ajax调用在客户端加载这些数据

html（使用jQuery）

将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>


var data={{data_json | safe}}；
选择哪种方式取决于您的前端和首选项

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

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

您需要将模型转换成普通的列表/字典，以便将它们转换成JSON。您决定在查询集上使用
values（）
。还有

尽管序列化，但这里有两个选项

JSON返回视图 或者使用创建直接返回JSON数据的视图

现在可以使用ajax调用在客户端加载这些数据

html（使用jQuery）

将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>


var data={{data_json | safe}}；
选择哪种方式取决于您的前端和首选项

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

如果您的前端需要能够动态加载不同的内容，并且数据量更大，请选择第二个选项。在这种情况下，我也会考虑使用模板/django REST框架使用.< /P> + 1。如果您的数据只流向客户端，那么模板就可以了。但是当你开始接受PUT、POST等时，DRF是最好的选择。因此，如果我需要动态内容，最好在客户端进行ajax调用？正如@DataSwede注意到的，数据流在这里也具有相关性。如果您的数据只从服务器流到客户端，模板方法是合适的，但是如果您的数据也需要流回，则应该考虑REST方法。@使用DRF的SAC20，很容易序列化/反序列化数据，并管理各种HTTP谓词。您可以发送一个GET-to/product/1/来接收产品内容的json响应，也可以发送一个PUT-to/product/1/来更新特定的产品。如果您只发送GET请求，模板将起作用，但是当您开始来回发送更复杂的请求时，请查看设计用于处理该请求的库。+1表示模板/django rest框架。如果您的数据只流向客户端，那么模板就可以了。但是当你开始接受PUT、POST等时，DRF是最好的选择。因此，如果我需要动态内容，最好在客户端进行ajax调用？正如@DataSwede注意到的，数据流在这里也具有相关性。如果您的数据只从服务器流到客户端，模板方法是合适的，但是如果您的数据也需要流回，则应该考虑REST方法。@使用DRF的SAC20，很容易序列化/反序列化数据，并管理各种HTTP谓词。您可以发送一个GET-to/product/1/来接收产品内容的json响应，也可以发送一个PUT-to/product/1/来更新特定的产品。如果您只发送GET请求，模板将起作用，但当您开始来回发送更复杂的请求时，请查看设计用于处理该请求的库。