Getting chart.js zur Arbeit mit Django und Apache

Ich habe das folgende Setup. Ich habe eine einfache index.html durch Apache serviert. Es sieht wie folgt aus.Getting chart.js zur Arbeit mit Django und Apache

Alles oben genannte versucht, ein Liniendiagramm auf dem Browser zu platzieren. Es verwendet chart.js. Um dies zu erreichen, versucht der customcharts.js, sich mit einem lokal laufenden django Server zu verbinden. Die obige html durch Apache läuft auf Port 8080 bedient wird, während django läuft auf Port 8090.

die customcharts.js wie sieht

folgt

function renderChart(data){ 
    console.log(data) 
    console.log(data.labels) 
    defaultLabels = data.labels 
    defaultData = data.defaultData 
    var ctx = document.getElementById("myChart").getContext('2d'); 
    var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     labels: defaultLabels, 
     datasets: [{ 
     lineTension: 0, 
     label: 'Activity Profile', 
     data: defaultData, 
     }] 
    } 
    }) 
} 

var endpoint = 'http://localhost:8090/polls/alice/' 
var defaultData = [] 
var defaultLabels = [] 

$.ajax({ 
    url: endpoint, 
    dataType: "JSONP", 
    success: renderChart, 
    method: 'GET' 
} 
);

Ferner meine django Ansicht ist

def json_response(func): 
    """ 
    A decorator thats takes a view response and turns it 
    into json. If a callback is added through GET or POST 
    the response is JSONP. 
    """ 
    def decorator(request, *args, **kwargs): 
     objects = func(request, *args, **kwargs) 
     if isinstance(objects, HttpResponse): 
      return objects 
     try: 
      data = simplejson.dumps(objects) 
      if 'callback' in request.REQUEST: 
       # a jsonp response! 
       data = '%s(%s);' % (request.REQUEST['callback'], data) 
       return HttpResponse(data, "text/javascript") 
     except: 
      data = simplejson.dumps(str(objects)) 
     return HttpResponse(data, "application/json") 
    return decorator 

epoch = datetime.datetime.utcfromtimestamp(0) 

r = redis.StrictRedis(host='localhost', port=6379, db=0) 
threat_list = ['date', 'categories', 'mix'] 

@json_response 
def index(request, uid): 
    print uid 
    uid = uid.rstrip('/') 
    _key = uid 
    retjsondict = {} 
    input_keys = [_key + ':' + x for x in threat_list] 
    k = input_keys[0] 
    retdict = {} 
    if r.exists(k): 
     retvalue = r.get(k).strip('"') 
     xdata_dt = [x.split(':')[0] for x in retvalue.split(' ')] 
     ydata_dt = [x.split(':')[1].rstrip(',') for x in retvalue.split(' ')] 
     retdict['defaultLabels'] = xdata_dt 
     retdict['defaultData'] = ydata_dt 
    print retdict 
    return JsonResponse(retdict)

die index ist die echte Ansicht und die json_response ist ein Dekorateur.

Allerdings, wenn ich versuche, es auf einem Browser anzeigen http://localhost ich mit dem folgenden Fehler

XMLHttpRequest laden können nicht http://localhost:8090/polls/alice/ bekommen. No Der 'Access-Control-Allow-Origin'-Header ist auf der angeforderten -Ressource vorhanden. Ursprung 'http://localhost' ist daher nicht erlaubt.

Kann mir jemand zeigen, was ich mache? Jede Hilfe/Zeiger geschätzt.

Quelle

2017-08-17 broccoli

ist 'customcharts.js' eine statische Ressource? –

ja es ist eine statische Ressource – broccoli

Wenn customcharts.js im static/yourapp ist, müssen Sie Ihr Skript laden, wie folgt:

<script src="{% static 'yourapp/customcharts.js' %}"></script>

nicht {% load staticfiles %}

Dann wird eine statische Ressource kann anrufen Vergessen Sie nicht, einen Blick rufen Sie müssen die JSON-Daten in der Ansicht abrufen und sie dann an die JavaScript-Funktion übergeben.

Ihre Vorlage sollte wie folgt aussehen:

{% load staticfiles %} 
<!DOCTYPE html> 
<html lang='en'> 
    <meta http-equiv="content-type" content="text/html; charset=UTF8"> 
    <head> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script language="JavaScript" src="{% static 'yourapp/customcharts.js' %}"> </script> 
     <script language="JavaScript"> 
      $.getJSON("{% url 'index' %}", function(data) { // 'index' is the name of the view in your urls.py 
       renderChart(data); 
      }); 
     </script> 
    </head> 
    <body> 
     <canvas id="myChart"></canvas> 
    </body> 
</html>

Hoffnung, das hilft.

Quelle

2017-08-17 14:38:30

Ich werde dies überprüfen und zurück – broccoli

vielleicht müssen Sie die '$ .getJSON' -Funktion in 'document.ready' setzen –

Wenn ich es versuchte bekomme ich den folgenden Fehler Reverse für 'Index 'with arguments'() 'und Schlüsselwortargumente' {} 'nicht gefunden. 2 Muster probiert: ['Umfragen /(.*) Umfragen /(.*)$', 'Umfragen /(.*)$'] Ich denke, ich muss den Parameter "Alice" innerhalb der "URL angeben Index "Ding irgendwie. Nicht sicher wie. – broccoli

Verwenden Sie 'Umfragen' anstelle von 'Index'

Quelle

2017-08-18 01:54:40

Näher kommen. Dies scheint meinen json einfach in den Browser zu rendern. Der "renderChart" wird nicht aufgerufen, denke ich. Ausgabe im Browser ist {"defaultLabels": ["2017-01-01", "2017-01-02", "2017-01-03", "2017-01-04", "2017-01-05" , "2017-01-06", "2017-01-07"], "defaultData": ["12", "8", "4", "9", "18", "1", "4" ]} als einfachen Text – broccoli

Verwenden Sie 'jquery.parseJson()': 'renderChart (jquery.parseJson (data));' –

Getting chart.js zur Arbeit mit Django und Apache

Antwort

Verwandte Themen