数据未在django管理员中显示-使用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

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>