Question

更新

我一直试图复制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>

原帖：

我的 my-app / 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文件中：

数据的格式是字典：{＆＃39;亚太地区＆＃39;：[1,2,3,4]，＆＃39;欧洲＆＃39;：[1 ，2,3 ......]，...}
类别的格式是字符串列表：[＆＃39; A＆＃39;，＆＃39; B＆＃39;，...]

我的 my-app / 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 %}

我的 my-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/'

我已经运行了命令 python manage.py collectstatic 。

Answer 1

直接渲染模板中的列表和词典等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控制台是否有错误消息。

通过JSON将Django数据传递给Highcharts

1 个答案: