Passing Django Daten Highcharts über JSON

UPDATE:Passing Django Daten Highcharts über JSON

Ich habe versucht, die Methode in this solution thread verwendet zu replizieren ein Highcharts Graph über Django angezeigt, aber vergeblich. Ich übermittle Daten von einem Python-Skript an meine views.py Datei, aber das Diagramm wird nicht angezeigt.

Unten ist, was ich bekomme, wenn ich in meinem Browser Quellcode überprüfen. Was fehlt mir in diesem HTML-Dokument? Die Grafik wird nicht angezeigt.

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <title>Head title here</title> 
    <meta charset="utf-8" /> 

    <link rel="stylesheet" href="/static/css/bootstrap.min.css" type = "text/css"/> 
    <meta name="viewport" content = "width=device-width, initial-scale=1.0"> 

    <style type="text/css"> 
     html, 
     body { 
      height:100% 
     } 
    </style> 
</head> 

<body class="body" style="background-color:#f6f6f6"> 
    <div class="container-fluid" style="min-height:95%; "> 
     <div class="row"> 
       <div class="col-sm-2"> 
        <br> 
        <center> 
        <img src="/static/img/profile.jpg" class="responsive-img" style='max-height:100px;' alt="face"> 
        </center> 
       </div> 
       <div class="col-sm-10"> 
        <br> 
        <center> 
        <h3>Some stuff goes here</h3> 
        </center> 
       </div> 
     </div><hr> 

     <div class="row"> 
      <div class="col-sm-2"> 
      <br> 

      <br> 
      <!-- Great, til you resize. --> 
      <!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">--> 
      <div class="well bs-sidebar" id="sidebar" style="background-color:#fff"> 
       <ul class="nav nav-pills nav-stacked"> 
       <li><a href='/'>Home</a></li> 
       <li><a href='/blog/'>Blog</a></li> 
       <li><a href='/contact/'>Contact</a></li> 
       </ul> 
      </div> <!--well bs-sidebar affix--> 
      </div> <!--col-sm-2--> 
      <div class="col-sm-10"> 

      <div class='container-fluid'> 
      <br><br> 

<body> 
    <div id="chart_ID" class="chart" style="height:100px; width:100%"></div> 
</body> 

      </div> 
      </div> 
     </div> 
    </div> 
</body> 

</html>

Original-Beitrag:

meine my-app/views.py Datei

from __future__ import unicode_literals 
import datetime 
from django.shortcuts import render 
from . import python_script 

def plot(request, chartID = 'chart_ID', chart_type = 'bar', chart_height = 500): 

    data = python_script.chart_function() 
    categories = python_script.chart_categories() 
    chart = {"renderTo": chartID, "type": chart_type, "height": chart_height,} 
    title = {"text": 'my title here'} 
    xAxis = {"title": {"text": 'axis title here'}, "categories": categories} 
    yAxis = {"title": {"text": 'axis title here'}} 
    series = [ 
     {"name": 'Asia Pacific', "data": data['Asia Pacific']}, 
     {"name": 'CIS', "data": data['Commonwealth of Independent States']}, 
     {"name": 'Europe', "data": data['Europe']}, 
     {"name": 'Latin America', "data": data['Latin America']}, 
     {"name": 'MENA', "data": data['Middle East and North Africa']}, 
     {"name": 'Northern America', "data": data['Northern America']}, 
     {"name": 'SSA', "data": data['Sub-Saharan Africa']} 
    ] 

    return render(request, 'my-app/chart.html', {'chartID': chartID, 'chart': chart, 
               'series': series, 'title': title, 
               'xAxis': xAxis, 'yAxis': yAxis})

In meiner views.py Datei:

die Format von Daten ist ein Wörterbuch: {'Asia Pacific': [1,2,3,4], 'Europa': [1,2,3 ...], ...}
das Format Kategorien ist eine Liste von Strings: [ 'A', 'B', ...]

meine my-app/chart.html Datei

{% load compress %} 
{% compress js %} 
<script src="{{ STATIC_URL }}jquery-3.2.1.js"></script> 
<script src="{{ STATIC_URL }}jquery-3.2.1.min.js"></script> 
<script src="{{ STATIC_URL }}Highcharts-5.0.14/code/js/highcharts.js"></script> 
<script src="{{ STATIC_URL }}Highcharts-5.0.14/code/js/modules/exporting.js"></script> 
{% endcompress %} 

{% block heading %} 
    <h1 align="center">Analysis</h1> 
{% endblock %} 

{% block content %} 
    <div id={{ chartID|safe }} class="chart" style="height:100px; width:100%"></div> 
{% endblock %} 

{% block overwrite %} 
<!-- Overwrite the base.html jQuery load and put in head for Highcharts to work --> 
{% endblock %} 

{% block extrajs %} 
<!-- Maps the Python template context variables from views.py to the Highchart js variables --> 
<script> 
    var chart_id = {{ chartID|safe }} 
    var chart = {{ chart|safe }} 
    var title = {{ title|safe }} 
    var xAxis = {{ xAxis|safe }} 
    var yAxis = {{ yAxis|safe }} 
    var series = {{ series|safe }} 
</script> 

<!-- Highchart js. Variable map shown above --> 
<script> 
$(document).ready(function() { 
    $(chart_id).highcharts({ 
     chart: chart, 
     title: title, 
     xAxis: xAxis, 
     yAxis: yAxis, 
     series: series 
    }); 
}); 
</script> 
{% endblock %}

mein meine -app/urls.py Datei

from django.conf.urls import url 
from . import views 

urlpatterns = [ 
    url(r'^$',views.index, name='index'), 
    url(r'^graph/', views.plot, name = 'plot'), 
]

meine settings.py Datei

INSTALLED_APPS = [ 
    'my-app', 
    'highcharts', 
    'jquery', 
    'compressor', 
    'django.contrib.admin', 
    'django.contrib.auth', 
    'django.contrib.contenttypes', 
    'django.contrib.sessions', 
    'django.contrib.messages', 
    'django.contrib.staticfiles', 
... 
STATIC_ROOT = 'static' 
STATIC_URL = '/static/' 
MEDIA_ROOT = 'media' 
MEDIA_URL = '/media/'

ich den Befehl Python manage.py collectstatic schon ran.

Quelle

2017-09-05 Joss

Direkt Python-Datenstrukturen wie Listen und Wörterbücher in Ihrer Vorlage zu Rendern, um sie in JavaScript verwenden können arbeiten, aber es ist unzuverlässig. Stattdessen wandeln sie in der Ansicht JSON:

import json 
... 
return render(request, 'my-app/chart.html', 
       {'chartID': json.dumps(chartID), 'chart': json.dumps(chart), 
       'series': json.dumps(series), 'title': json.dumps(title), 
       'xAxis': json.dumps(xAxis), 'yAxis': json.dumps(yAxis)})

In Ihrem Vorlage, verwenden Sie die JSON wie folgt aus:

var chartID = JSON.parse("{{ chartID|escapejs }}")

Wenn das das Problem nicht lösen, überprüfen Sie die JavaScript-Konsole Ihres Browsers für Fehlermeldungen.

Quelle

2017-09-05 11:32:37

Dank Daniel - es hat es nicht gelöst, aber ich überprüfte die JavaScript-Konsole und es zeigt 4 Warnungen für jede statische Datei, die ich lade, die Warnungen sagen: Uncaught SyntaxError: Unerwartetes Token < – Joss

Offenbar Ihre statischen Dateien kein gültiges JavaScript, das klingt für mich so, als könnten die Dateien nicht korrekt geladen werden.Überprüfen Sie die URL in der Seitenquelle und sehen Sie, was sie zurückgibt. –

BTW, ist es eine gute Idee, Ihre ursprüngliche Frage mit diesen Ergebnissen zu aktualisieren, so dass andere leichter folgen und läuten können. –

Passing Django Daten Highcharts über JSON

Antwort

Verwandte Themen