Django - 图表无法正确显示

Question

此处的目标是显示与关联和总成员相对应的每个栏，如下所示：

我得到的是这个没有价值的大块。 似乎没有人在我这里找到同样的问题。

还是一个新手，所以感谢你的所有帮助＆amp;指导，乡亲们！

models.py

class Member(models.Model):
   member_no = models.AutoField(primary_key=True)
   association = models.ForeignKey('Association')
   ...


class Association(models.Model):
   asoc_name = models.CharField(max_length=50, null=True, blank=True)


    def __str__(self):
       return self.asoc_name

    def __unicode__(self):
       return self.asoc_name


 class AssociationSummary(Association):
    class Meta:
       proxy = True
       verbose_name = 'Association Summary'
       verbose_name_plural = 'Association Summary'

admin.py

@admin.register(AssociationSummary)
class ChartAssociationAdmin(admin.ModelAdmin):
   change_list_template = 'admin/chart_association.html'


   def changelist_view(self, request, extra_context=None):
    response = super(ChartAssociationAdmin, self).changelist_view(
        request,
        extra_context=extra_context,
    )
    try:
        qs = response.context_data['cl'].queryset
    except (AttributeError, KeyError):
        return response

    metrics = {
    'association': Count('asoc_name'),
    'total': Count('member'),
    }

    response.context_data['summary'] = list(
        qs.values('asoc_name', 'member').annotate(**metrics)
    )

    response.context_data['summary_total'] = dict(
        qs.aggregate(**metrics)
    )

    summary_over_time = qs.values('asoc_name', 'member').annotate(total=Sum('member'))

    summary_range = summary_over_time.aggregate(
        low=Min('total'),
        high=Max('total'),
    )
    high = summary_range.get('high', 0)
    low = summary_range.get('low', 0)

    response.context_data['summary_over_time'] = [{
                                                      'asoc_name': x['asoc_name'],
                                                      'total': x['total'] or 0,
                                                      'pct':\
                                                          ((x['total'] or 0) - low) / (high - low) * 100
                                                          if high > low else 0,
                                                  } for x in summary_over_time]

    return response

chart_association.html

{% extends 'admin/change_list.html' %}

{% block content_title %}
   <h1> Association Summary </h1>
{% endblock %}

{% block result_list %}
<div class=”results”>
<table>

<thead>
  <tr>
    <th>
      <div class=”text”>
        <span>Association</span>
      </div>
    </th>
    <th>
      <div class=”text”>
        <span>Total Members</span>
      </div>
    </th>
  </tr>
</thead>
<tbody>
  {% for row in summary %}
  <tr class="{% cycle 'row1' 'row2' %}">
    <td> {{ row.asoc_name }} </td>
    <td> {{ row.total }} </td>
  </tr>
  {% endfor %}
        </tr>
        <tr style="font-weight:bold; border-top:2px solid #DDDDDD;">
        <td> Total </td>
        <td> {{ summary_total.total }} </td>
  </tr>
</tbody>

</table>
</div>

<br>
<h2> Association Chart </h2>
<style>
.bar-chart {
  display: flex;
  justify-content: space-around;
  height: 160px;
  padding-top: 60px;
  overflow: hidden;
}
.bar-chart .bar {
    flex: 100%;
    align-self: flex-end;
    margin-right: 2px;
    position: relative;
    background-color: #79aec8;
}
.bar-chart .bar:last-child {
    margin: 0;
}
.bar-chart .bar:hover {
    background-color: #417690;
}
.bar-chart .bar .bar-tooltip {
    position: relative;
    z-index: 999;
}
.bar-chart .bar .bar-tooltip {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-weight: bold;
    opacity: 0;
}
</style>

  <div class="results">
    <div class="bar-chart">
    {% for x in summary_over_time %}
        <div class="bar" style="height:{{x.pct}}%">
            <div class="bar-tooltip">
                {{ x.total | default:0 }}<br>
                {{ x.asoc_name }}
            </div>
        </div>
    {% endfor %}
    </div>
</div>


{% endblock %}

{% block pagination %}{% endblock %}