django admin 中未显示数据 - 使用 chart.js（无错误）

Question

我创建了一个 changelist_view 用于在 Django 管理中显示 chart.js 视觉对象。 我没有收到任何错误，图表轮廓可见，但数据不可见。不知道我错过了什么。信息如下：

admin.py 模型：

class MachineFaultAdmin(admin.ModelAdmin):
readonly_fields = [
    'event_id',
    'fault_type_id',
    'position',
]
list_display = [
    'event_id',
    'fault_type_id',
    'position',
]

def changelist_view(self, request, extra_context=None):
    # Aggregate Faults
    chart_data = (
        MachineFault.objects.all()
        .values('position')
        .annotate(total=Count('fault_type_id'))
        .order_by('total')
        .filter(position__gte=10)
    )

    #Serialize and attach the chart data to the template context
    as_json = json.dumps(list(chart_data), cls=DjangoJSONEncoder)
    extra_context = extra_context or {"chart_data": as_json}

    #Call the superclass changelist_view to render the page
    return super().changelist_view(request, extra_context=extra_context)

def has_add_permission(self, request):
    # Nobody is allowed to add
    return False

def has_delete_permission(self, request, obj=None):
    # nobody is allowed to delete
    return False

# suit_classes = 'suit-tab  suit-tab-faults'
empty_value_display = ''
list_filter = ('fault_type',)
search_fields = ('position',)

changelist_view html（管理员覆盖文件）

<!--# machines/templates/admin/machines/machinefault/change_list.html-->

{% extends "admin/change_list.html" %}
{% load static %}

<!-- Override extrahead to add Chart.js -->
{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const ctx = document.getElementById('myChart').getContext('2d');

  // Sample data
  const chartData = {{ chart_data | safe }};

  // Parse the dates to JS
  chartData.forEach((d) => {
    d.x = new Date(d.date);
  });

  // Render the chart
  const chart = new Chart(ctx, {
    type: 'bar',
    data: {
      datasets: [
        {
          label: 'Breaks ',
          data: chartData,
          backgroundColor: 'rgba(220,20,20,0.5)',
        },
      ],
    },
    options: {
      responsive: true,
      scales: {
        xAxes: [
               {
            type: 'time',
            time: {
              unit: 'day',
              round: 'day',
              displayFormats: {
                day: 'MMM D',
              },
            },
          },
        ],
        yAxes: [
          {
            ticks: {
              beginAtZero: true,
            },
          },
        ],
      },
    },
  });
});
</script>
{% endblock %}

{% block content %}
<!-- Render our chart -->
<div style="width: 80%;">
  <canvas style="margin-bottom: 5px; width: 50%; height: 15%;" id="myChart"></canvas>
</div>
<button id="reload" style="margin: 1rem 0">Reload chart data</button>
<!-- Render the rest of the ChangeList view -->
{{ block.super }}
{% endblock %}

但我的图表仍然是空白的 - 我没有错误。 使用最新的Django，Python3.7

更新：2020 年 2 月 14 日

Answer 1

在没有看到 HTML 的情况下无法确定这是您问题的原因，但是您将数据传递给图表 JS 的方式是不安全的 - 不要这样做：

const chartData = {{ chart_data | safe }};

这很可能导致您最终得到无效的 JS，因为输出没有正确转义。相反，使用json_script 过滤器来安全地渲染您的对象，然后在 JS 中读取它。像这样的：

{{ chart_data|json_script:"chart-data" }}
<script>
    const chartData = JSON.parse(document.getElementById("chart-data").textContent);
    // initialise the chart as you currently do
</script>   

注意 - 您需要停止在视图中将数据编码为 JSON - 只需将原始列表传递给它，此过滤器将为您安全编码。

如果这不能解决问题，那么数据结构本身很可能不是图表库所期望的 - 也许如果您发布 chartData 看起来的示例，我们可以看到这看起来是否正确。