Django - 无法获取显示数据的高图 [英] Django - can't get highchart to display data

问题描述

仍然新的，欣赏你的帮助，民众！

---

views.py

pre> class ChartData（object）：
def check_valve_data（）：
data = {'member_no'：[]}

people = Member.objects.all（）

在单位中：
data ['member_no']。append（unit.member_no）

return data


def chartViewHigh（request，chartID ='chart_ID'，ch $ _


$ b chart = {renderTo：chartID，type：chart_type，height：chart_height ，}
title = {text：'检查会员资料'}
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 =chartstyle =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％} 
  

< hr>

urls.py

  urlpatterns = patterns [
 url r'^ chartViewHigh / $'，views.chartViewHigh，name ='chartViewHigh'），
] 
  

解决方案

几个问题：

您需要在图表ID模板变量周围的引号，使其成为HTML属性： / p>

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

您没有传入有效的JQuery选择器：要选择上述div，您应该使用 $（＃chart_ID ）（请参阅 JQuery选择器），因此您的Django模板变量例如：

  $（＃{{chartID | safe}}）
  

此外，数据似乎需要一个系列键来渲染（我还没有使用highcharts很多b看到这里 - 你的图表会在添加时显示）：

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）
  

I'm trying to display a chart with help of Highchart by following this solution:

Passing Django Database Queryset to Highcharts via JSON

But I can't get the data to appear:

Still new to this and appreciate your help, folks!

---

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'),
]

解决方案

A few issues:

You need quote marks around the chart ID template variable to make it an HTML attribute:

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

You're not passing in a valid JQuery selector: to select the above div you should use $("#chart_ID") (see JQuery selectors), so with your Django template variable for example:

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

Also the data appears to need a series key to render (I haven't used highcharts much but see here - your chart renders when this is added):

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

Also the ChartData class doesn't belong in your views.py file - only HTTP request/responses belong there. I recommend working through the official Django tutorial if you haven't already to get an idea of the "Django way" to do things. For example, your ChartData method produces a list of member_nos, but you can do this with a single line of code :)

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

这篇关于Django - 无法获取显示数据的高图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！