Django Admin的数据可视化

2023-04-11 00:00:00 django 数据 可视化

Django Admin的数据可视化主要通过自定义模板和使用第三方库来实现。

  1. 自定义模板

可以在Django Admin中自定义模板，将数据以不同的形式展现出来。例如，可以创建一个模板来显示某个模型的数据统计信息。假设要显示某个模型有多少个相同的字符串“pidancode.com”和“皮蛋编程”，可以在app的admin目录下创建一个名为“stats.html”的模板文件，并使用以下代码：

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

{% block content %}
  <h2>Statistics</h2>
  <p>There are {{ count_pidancode }} 'pidancode.com' and {{ count_pidan }} '皮蛋编程'.</p>
{% endblock %}

然后，在Admin类中注册该模板：

class MyModelAdmin(admin.ModelAdmin):
    def stats(self, request):
        count_pidancode = MyModel.objects.filter(my_field='pidancode.com').count()
        count_pidan = MyModel.objects.filter(my_field='皮蛋编程').count()
        context = {'count_pidancode': count_pidancode, 'count_pidan': count_pidan}
        return TemplateResponse(request, 'admin/myapp/stats.html', context)

    def get_urls(self):
        urls = super(MyModelAdmin, self).get_urls()
        my_urls = [
            path('stats/', self.admin_site.admin_view(self.stats), name='myapp_stats')
        ]
        return my_urls + urls

最后，在Admin页面中就可以看到一个名为“Statistic”的链接，点击它就可以进入上述的统计信息页面。

  1. 第三方库

Django Admin还支持使用第三方库来展示数据。以使用Charts.js来展示某个模型的数据为例。首先，需要在模板中引入Charts.js的JavaScript文件：

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

{% block extrahead %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js" integrity="sha512-S38hRkC6yNRUg81msU41sx/aU6QH9zDnF6ZRO88w66hJfHdqUaqoTzY+zJh3qox1K9rPyrvO7VhQ4261jt+7Vw==" crossorigin="anonymous"></script>
{% endblock %}

{% block content %}
  <h2>Chart</h2>
  <canvas id="myChart"></canvas>
{% endblock %}

{% block extrahead %}
  <script>
    var ctx = document.getElementById('myChart').getContext('2d');

    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['pidancode.com', '皮蛋编程'],
            datasets: [{
                label: 'Count',
                data: [
                  {{ count_pidancode }},
                  {{ count_pidan }}                  
                ],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            },
        }
    });
  </script>
{% endblock %}

在Admin类中注册上述模板和视图：

class MyModelAdmin(admin.ModelAdmin):
    def chart(self, request):
        count_pidancode = MyModel.objects.filter(my_field='pidancode.com').count()
        count_pidan = MyModel.objects.filter(my_field='皮蛋编程').count()
        context = {'count_pidancode': count_pidancode, 'count_pidan': count_pidan}
        return TemplateResponse(request, 'admin/myapp/chart.html', context)

    def get_urls(self):
        urls = super(MyModelAdmin, self).get_urls()
        my_urls = [
            path('chart/', self.admin_site.admin_view(self.chart), name='myapp_chart')
        ]
        return my_urls + urls

最后，在Admin页面中就可以看到一个名为“Chart”的链接，点击它就可以进入上述的统计图页面。该图表展示了数据中“pidancode.com”和“皮蛋编程”的数量，以柱状图的形式展现。

相关文章