Django - 无法获取高图来显示数据答案

【问题标题】：Django - can't get highchart to display dataDjango - 无法获取高图来显示数据
【发布时间】：2017-10-14 19:01:21
【问题描述】：

我正在尝试按照以下解决方案在 Highchart 的帮助下显示图表：

Passing Django Database Queryset to Highcharts via JSON

但我无法让数据出现：

还是新手，感谢您的帮助，伙计们！

views.py

class ChartData(object):
    def check_valve_data():
        data = {'member_no': []}

        people = Member.objects.all()

        for unit in people:
             data['member_no'].append(unit.member_no)

        return data


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

     chart = {"renderTo": chartID, "type": chart_type, "height": chart_height, }
     title = {"text": 'Check Member Data'}
     xAxis = {"title": {"text": 'Member'}, "categories": data['member_no']}
     yAxis = {"title": {"text": 'Data'}}

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

chartViewHigh.html

{% extends 'base.html' %}

{% load staticfiles i18n %}

{% block head %}
  <link href="{% static 'css/chart.css' %}" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="https://code.highcharts.com/highcharts.js"></script>
      <script src="https://code.highcharts.com/modules/exporting.js"></script>

 {% endblock head %}

 {% block main %}

<h1 align="center">Analysis</h1>

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


{% block extrajs %}
<script>
   var chart_id = {{ chartID|safe }};
   var chart = {{ chart|safe }};
   var title = {{ title|safe }};
   var xAxis = {{ xAxis|safe }};
   var yAxis = {{ yAxis|safe }};
</script>


<script>
$(document).ready(function() {
   $(chart_id).highcharts({
       chart: chart,
       title: title,
       xAxis: xAxis,
       yAxis: yAxis,
   });
});
</script>
{% endblock %}

{% endblock main %}

urls.py

urlpatterns = patterns[
    url(r'^chartViewHigh/$', views.chartViewHigh, name='chartViewHigh'),
]

【问题讨论】：

标签： django python-3.x highcharts

【解决方案1】：

几个问题：

您需要在图表 ID 模板变量周围加上引号以使其成为 HTML 属性：

<div id="{{ chartID|safe }}" ...

您没有传入有效的 JQuery 选择器：要选择上面的 div，您应该使用 $("#chart_ID")（请参阅 JQuery selectors），因此以您的 Django 模板变量为例：

$("#{{ chartID|safe }}")

此外，数据似乎需要一个 series 键来呈现（我没有经常使用 highcharts，但请参见此处 - 添加此图表时您的图表会呈现）：

https://www.highcharts.com/docs/getting-started/your-first-chart

ChartData 类也不属于您的 views.py 文件 - 只有 HTTP 请求/响应属于那里。如果您还没有了解“Django 方式”做事，我建议您阅读官方 Django 教程。例如，您的ChartData 方法会生成一个member_nos 列表，但您可以使用一行代码来完成此操作:)

Member.objects.values_list('member_no', flat=True)

【讨论】：