2017-04-25 1 views
1

django의 views.py에서 queryset을 d3.js로 전달하려고합니다.django에서 d3.js로 json 데이터 보내기

views.py :

DEF 인덱스 (요청).. 는 QS = DCPOWERSTATS.objects.all() 값 ('TS', 'PUE') order_by ('TS') 창 (렌더링 요청, '대시 보드/dash.html', 컨텍스트 = QS})

dash.html : 내가 좋아하는 뭔가를 만들 views.py와 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> 

: https://bl.ocks.org/mbostock/3885304

이전 답변은 모두 혼란 스럽습니다 .dash.html뿐 아니라 views.py에 대한 해결책이 필요합니다. 나는 또한 queryset 결과를 javascript로 보내는 완벽한 방법을 알아야한다.

감사합니다.

답변

3

모델을 일반 목록/사전으로 변환해야 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 템플릿에 직접 JSON 데이터를 렌더링에 JSON을 전달 (jQuery를 사용하여)

HTML

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

. 이 경우 직렬화 된 데이터를 뷰에 추가하고 템플릿 태그를 사용해야합니다.

보기

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> 

선택하는 방법은 프론트 엔드 및 환경 설정에 따라 달라집니다.

뷰 자바 스크립트에서 사용할 수있는 정적 데이터가 필요한 경우 템플릿 옵션을 선택합니다.

프론트 엔드가 다른 것들을 동적으로로드 할 수 있어야하고 데이터 양이 많을 경우 두 번째 옵션을 선택하십시오. 이 경우에도 django rest framework을 사용하는 것이 좋습니다.

+0

+1 템플릿/django rest framework. 데이터가 클라이언트에만 전달되는 경우 템플릿이 정상적으로 작동합니다. 하지만 PUT, POST 등을 받아들이 기 시작하면 DRF를 사용하는 것이 좋습니다. – DataSwede

+0

그래서 동적 인 콘텐츠를 필요로한다면 클라이언트 측에서 AJAX 호출을 선호합니까? – sach20

+0

@DataSwede가 주목 한 것처럼 여기에 데이터의 흐름도 관련성이 있습니다. 데이터가 서버에서 클라이언트로만 흐르는 경우 템플릿 접근 방식이 적합하지만 데이터를 다시 전달해야하는 경우 RESTful 방식을 고려해야합니다. – dahrens