Данные не отображаются в django admin - используя диаграмму. js (без ошибок) - PullRequest
Новая
       3

Данные не отображаются в django admin - используя диаграмму. js (без ошибок)

0 голосов
/ 06 февраля 2020

Я создал changelist_view для отображения диаграммы. js визуал в Django admin. Я не получаю никаких ошибок, контур графика виден, а данные - нет. Не уверен, что мне не хватает. Информация ниже:

Модель 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 enter image description here

ОБНОВЛЕНИЕ: 2/14/2020 enter image description here

1 Ответ

1 голос
/ 06 февраля 2020

Нельзя быть уверенным, что это является причиной вашей проблемы, если вы не видите 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, мы увидим, выглядит ли это правильно.

...