Python 通过JSON将Django数据库查询集传递给Highcharts

第一次海报，长期读者。我花了很长一段时间寻找答案，这让我觉得我错过了一些基本的东西

我试图提取数据库表中的数据，并将其传递到Highcharts绘图中显示。在检查源代码时，我没有从Django或客户端收到任何错误

使用：Django 1.7和Python 3.4

views.py文件：

#unit/views.py
from django.http import JsonResponse
from django.shortcuts import render
from unit.analysis_funcs import ChartData

def chart_data_json(request):
    data = {}
    data['chart_data'] = ChartData.get_data()
    return JsonResponse(data, safe = True)

def plot(request):    
    return render(request, 'unit/data_plot.html', {})

get_data（）函数：

#unit/analysis_funcs.py
from unit.models import CheckValve

class ChartData(object):    
    def get_data():
        data = {'serial_numbers': [], 'mass': []}

        valves = CheckValve.objects.all()

        for unit in valves:
            data['serial_numbers'].append(unit.serial_number)
            data['mass'].append(unit.mass)

        return data

模板：

<!-- templates/unit/data_plot.html -->
{% extends "base.html" %}

{% block extrahead %}
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
{% endblock %}

{% block rootcontainer %}
    <div id="container" style="width:100%; height:400px;"></div>    
{% endblock %}

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

{% block extrajs %}
<script>
$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'line'
        },
        series: [{}]
    };
    var ChartDataURL = "{% url 'chart_data_json' %}";
    $.getJSON('ChartDataURL', function(data) {
        options.xAxis.categories = data['chart_data']['serial_numbers'];
        options.series[0].name = 'Serial Numbers';
        options.series[0].data = data['chart_data']['mass'];
        var chart = new Highcharts.Chart(options);
    });

});
</script>
{% endblock %}

一切似乎都在运行，但Highchart绘图无法呈现。我认为这是我如何将JSON数据从view.py移到template.html的原因，但在长时间盯着它看之后，我开始对它产生怀疑

---

任何帮助都会很棒

我终于开始策划了。我找到了这种方法。感谢你发布他的方法

My new views.py基于上述方法：

def plot(request, chartID = 'chart_ID', chart_type = 'line', chart_height = 500):
    data = ChartData.check_valve_data()

    chart = {"renderTo": chartID, "type": chart_type, "height": chart_height,}  
    title = {"text": 'Check Valve Data'}
    xAxis = {"title": {"text": 'Serial Number'}, "categories": data['serial numbers']}
    yAxis = {"title": {"text": 'Data'}}
    series = [
        {"name": 'Mass (kg)', "data": data['mass']}, 
        {"name": 'Pressure Drop (psid)', "data": data['pressure drop']},
        {"name": 'Cracking Pressure (psid)', "data": data['cracking pressure']}
        ]

    return render(request, 'unit/data_plot.html', {'chartID': chartID, 'chart': chart,
                                                    'series': series, 'title': title, 
                                                    'xAxis': xAxis, 'yAxis': yAxis})

用于提取数据库对象和传递数据的快速功能：

class ChartData(object):    
    def check_valve_data():
        data = {'serial numbers': [], 'mass': [],
                 'pressure drop': [], 'cracking pressure': [], 'reseat pressure': []}

        valves = CheckValve.objects.all()

        for unit in valves:
            data['serial numbers'].append(unit.serial_number)
            data['mass'].append(unit.mass)
            data['cracking pressure'].append(unit.cracking_pressure)
            data['pressure drop'].append(unit.pressure_drop)
            data['reseat pressure'].append(unit.reseat_pressure)

        return data   

Harrison方法的关键是一个映射脚本，用于将Highcharts js转换为Python模板变量：

{% extends "base.html" %}

{% block extrahead %}
    <!-- Load in jQuery and HighCharts -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
{% endblock %}

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

{%extends“base.html”%}
{%block extrahead%}
{%endblock%}
{%block heading%}
分析
{%endblock%}
{%block content%}
{%endblock%}
{%block overwrite%}
{%endblock%}
{%block extrajs%}
var chart_id={{chartID|safe}
变量图表={{chart | safe}}
var title={{title | safe}}
var xAxis={{xAxis|safe}
var yAxis={{yAxis|safe}
var系列={series | safe}
$（文档）.ready（函数（）{
$（图表id）。高图({
图表：图表，
标题:标题,，
xAxis:xAxis，
亚克斯：亚克斯，
系列：系列
});
});
{%endblock%}

---

现在一切正常，显示正确

控制台中是否收到任何错误？@SebastianBochan检索站点时没有错误。对主url和调用数据的url获得典型的200响应这很好。但即使是我也在使用它。只有一个问题，如果xAxis是约会，该怎么办。已尝试格式化，但js无法将其识别为日期。@peteza33感谢您回来并使用对您有效的解决方案更新帖子。显然，Django+Highchart集成的例子并不多，这篇文章帮助很大。但愿我能不止一次投票@peteza33，@user1572215随着我对Django和Highcharts的了解，我意识到最好只在js中保留highchart参数，因为Django视图不需要定义x轴上的内容和y轴上的内容，这是tamplate中的表示部分。与您的代码一样，

render

'中的上下文只包括

数据['mass']

，

数据['pressure drop']

等。此外，我意识到最好将数据作为JSON发送到模板，以避免以下问题：

{% extends "base.html" %}

{% block extrahead %}
    <!-- Load in jQuery and HighCharts -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
{% endblock %}

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