經由JSON傳遞Django的數據到Highcharts

我已經試圖複製在this solution thread用於顯示經由Django的一個Highcharts圖形的方法中，但不成功。我從一個Python腳本，將數據傳遞給我的views.py文件，但圖形顯示不出來。

下面是我所得到的，當我檢查鑑於我的瀏覽器源。我在這個HTML文件中丟失了什麼？該圖沒有顯示出來。

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

原帖：

我我的應用程序內/ views.py文件

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})

在我views.py文件：

的格式個數據是一本字典：{ '亞太'：[1,2,3,4]， '歐洲'：[1,2,3 ...]，...}
的的類別格式是一個字符串列表： 'A'， 'B'，...]

我我的應用程序內/ chart.html文件

{% 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 %}

我我-app/urls.py文件

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

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

我settings.py文件

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/'

我已經跑了命令蟒蛇manage.py collectstatic了。

來源

2017-09-05 Joss

直接渲染Python數據結構，比如模板中的列表和字典，以便在JavaScript中使用它們可以可以工作，但它不可靠。取而代之的是，將它們轉換爲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)})

在你的模板，使用JSON是這樣的：

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

如果不解決問題，請檢查您的瀏覽器的JavaScript控制檯用於錯誤消息。

來源

2017-09-05 11:32:37

感謝Daniel - 它沒有解決它，但我檢查了JavaScript控制檯，它確實顯示了我正在加載的每個靜態文件的4個警報，警報說：未捕獲的SyntaxError：意外的令牌< – Joss

顯然，不包含有效的JavaScript，這聽起來好像該文件無法正確加載。檢查頁面源中的URL並查看它返回的內容。 –

順便說一句，這是一個好主意，更新您的原始問題與這些調查結果，以便其他人可以更容易跟隨和編鐘英寸 –

經由JSON傳遞Django的數據到Highcharts

回答

相關問題