2017-04-25 3 views
1

Ich versuche, ein Queryset in Djangos views.py an d3.js zu übergeben.Senden von JSON-Daten von Django an d3.js

views.py:

def Index (Anfrage):.. qs = DCPOWERSTATS.objects.all() VALUES ('TS', 'PuE') order_by ('TS') return render (Anfrage, 'Armaturenbrett/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> 

ich brauche Änderungen in views.py und dash.html machen zu schaffen so etwas wie: https://bl.ocks.org/mbostock/3885304

Alle vorherigen Antworten sind verwirrend. Ich brauche eine Lösung für views.py sowie dash.html. Ich muss auch die perfekte Möglichkeit kennen, Abfrageergebnis-Ergebnisse an Javascript zu senden.

Danke!

Antwort

3

Sie müssen Ihre Modelle in einfache Listen/Wörterbücher konvertieren, um sie in JSON konvertieren zu können. Sie haben entschieden, values() für das Abfrage-Set zu verwenden. Es gibt auch django serialization.

Trotz der Serialisierung haben Sie hier zwei Möglichkeiten.

JSON Rückkehr Ansichten

Entweder erstellen Sie eine Ansicht, die Daten JSON mit JsonResponse direkt zurückgibt.

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[:]) 

Sie können diese Daten jetzt auf Client-Seite mit einem Ajax-Aufruf laden.

html (mit jQuery)

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

Passing JSON zu Ihrer Vorlage

Oder Sie Ihre JSON-Daten direkt in die HTML-Vorlage machen. In diesem Fall sollten Sie Ihre serialisierten Daten zur Ansicht hinzufügen und dort das Template-Tag verwenden.

Ansicht

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> 

Welchen Weg hängt von Ihrem Frontend und Vorlieben auswählen.

Wenn Sie nur einige statische Daten in Ihren Ansichten Javascript benötigen, würde ich die Vorlage Option auswählen.

Wenn Ihr Frontend verschiedene Dinge dynamisch laden kann und die Datenmenge größer ist, wählen Sie die zweite Option. In diesem Fall würde ich auch die Verwendung von django rest framework in Erwägung ziehen.

+0

+1 für Vorlagen/Django Rest Framework. Wenn Ihre Daten nur zum Client fließen, sind Vorlagen gut. Aber wenn Sie PUT, POST usw. akzeptieren müssen, ist DRF der richtige Weg. – DataSwede

+0

also, wenn ich dynamischen Inhalt brauche, der ajax Anrufe auf der Klientenseite bevorzugt, ist? – sach20

+0

Da @DataSwede bemerkt hat, dass der Datenfluss hier ebenfalls relevant ist. Wenn Ihre Daten nur vom Server zum Client fließen, ist der Vorlagenansatz geeignet. Wenn Ihre Daten jedoch auch zurückfließen müssen, sollten Sie den REST-Ansatz in Betracht ziehen. – dahrens