如何将条形图添加到基于Django的数据库中？

问题描述 投票：0回答：1

亲爱的社区成员，

我非常希望您能帮助我将条形图添加到Django项目中。1.我有一个大约有1000个项目的数据库。2.我需要能够在需要时可视化每个商品3个月的销售额。不确定什么是正确的方法。

这是我的模型。py：

从django.db导入模型从数学导入*从十进制导入*

class Itemslist(models.Model):
    item_n = models.CharField(max_length=200)
    sales_this_month = models.DecimalField(blank=True, null=True, max_digits=19, 
    decimal_places=0)
    saleslm = models.DecimalField(blank=True, null=True, max_digits=19, decimal_places=0)
    sales2m = models.DecimalField(blank=True, null=True, max_digits=19, decimal_places=0)
    sales3m = models.DecimalField(blank=True, null=True, max_digits=19, decimal_places=0)


    def __str__(self):
        return self.item_n

这是我的views.py文件，它是使用提供的最新解决方案创建的实验：

def charts(request):
    charts = Itemslist.objects \
        .values('saleslm') \
        .annotate(lm=Count('saleslm')) \
        .annotate(m2=Count('sales2m')) \
        .annotate(3m3=Count('sales3m')) \
        .order_by('saleslm')
    return render(request, 'charts.html', {'charts': charts})

如您所见，这不是我需要的解决方案，我只是想至少想出一些东西，而eaven已经为我显示了具有相同值的图形。这是我的hmtl代码：

{% extends 'base.html' %}
{% block js %}
{% if user.is_authenticated %}
{% load loads_extra %}
{% load static %}

<br>
<p>Logged in user: {{ user.username }}</p>
<br>


<html>
<head>
<meta charset="utf-8">
<title>Django Highcharts Example</title>
</head>
<body>
<div id="container"></div>
{
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script>
  Highcharts.chart('container', {
      chart: {
          type: 'column'
      },
      title: {
          text: 'Sales previous 3 months'
      },
      xAxis: {
          categories: ['sales']
      },
      series: [{
          name: '3mBack',
          data: [ {% for entry in charts %}{{ entry.m3 }}{% endfor %} ]
      }, {
          name: '2mBack',
          data: [ {% for entry in charts %}{{ entry.m2 }}{% endfor %} ]
      }, {
          name: 'Lmonth',
          data: [ {% for entry in charts %}{{ entry.lm }}{% endfor %} ]
      }, ]

  });
</script>

</body>
</html>

{% endif %}
{% endblock %}

<!-- charting tutorial to follow :  https://simpleisbetterthancomplex.com/tutorial/2018/04/03/how-to-integrate-highcharts-js-with-django.html -->

我必须为图表创建一个请求按钮，然后必须使用正确的参数来生成图表。

已经看过这个问题：Displaying multiple bar graph in django

也已经搜索过此解决方案https://code.djangoproject.com/wiki/Charts

并看了这篇文章https://simpleisbetterthancomplex.com/tutorial/2018/04/03/how-to-integrate-highcharts-js-with-django.html

上一篇文章是最清晰的，您可以看到，我刚刚从那里复制粘贴了解决方案，并做了一些小的更改。这是我放置在base.html文件中的脚本：

<script src="https://code.highcharts.com/highcharts.src.js"></script>

这就是我最终显示的图表：

Highchart

但是在我的情况下仍然找不到如何处理它。

据我所知，所有这些解决方案都在说明如何实现对一个数组进行制图，求和或自生成数组。但是我希望能够选择何时显示图形以及针对哪个项目。

该按钮位于此html文件上：

{% extends 'base.html' %}
{% block js %}
{% if user.is_authenticated %}
{% load loads_extra %}
{% load static %}

<br>
<p>Logged in user: {{ user.username }}</p>
<br>


    <body>
            <table id="example" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
            <thead>
            <tr>
              <th>SUP:</th>
              <th>Item N.:</th>
              <th>SKU</th>
              <th>Description</th>
              <th>3mBack</th>
              <th>2mBack</th>
              <th>Lmonth</th>
              <th>CMonth</th>
              <th>Nmonth</th>
              <th>N2Month</th>
              <th>N3month</th>
              <th></th>

            </tr>
            </thead>
            <tbody>
                        {% for records in sorted %}
                <tr>
                <td>{{ records.sup }}</td>
                <td>{{ records.item_n }}</td>
                <td>{{ records.sku }}</td>
                <td>{{ records.description }}</td>
                <td>{{ records.sales3m }}</td>
                <td>{{ records.sales2m }}</td>
                <td>{{ records.saleslm }}</td>
                <td>{{ records.sales_this_month }}</td>
                <td>{{ records.m1predicted }}</td>
                <td>{{ records.m2predicted }}</td>
                <td>{{ records.m3predicted }}</td>

                <td>
                  <a href="{% url 'edit' records.id %}" class="btn btn-secondary">Edit</a>
                </td>

                            </tr>
                        {% endfor %}

            </tbody>
        </table>

        <script>
        $(document).ready(function() {
            var table = $('#example').DataTable( {
            fixedColumns: true,
                lengthChange: true,
                buttons: [ 'copy', 'excel', 'csv', 'pdf', 'colvis' ]
            } );

            table.buttons().container()
                .appendTo( '#example_wrapper .col-md-6:eq(0)' );
        } );
         </script>
    </body>
</html>
{% endif %}
<div></div>
{% endblock js %}

这是我在这个社区中的第一个问题，因此，如果不清楚，请帮助我以正确的方式进行更正。

等待任何有用的答案！

python django graph charts highcharts
1个回答
0
投票

views.py您在annotate（3m3上的错误不能以3开头）上出错。您还具有相同的函数名和变量名def图表以及图表。Python可能足够聪明，可以找出它，但请尝试避免这样做。我也反对在此处明确命名变量saleslm和sales2m。

def charts(request):
    return render(request, 'charts.html')


def charts_ajax(request):
    charts_data = Itemslist.objects \
        .values('saleslm') \
        .annotate(lm=Count('saleslm')) \
        .annotate(m2=Count('sales2m')) \
        .annotate(m3=Count('sales3m')) \
        .order_by('saleslm')
    return JsonResponse({'charts': list(charts_data)})

url.py
path('charts/', views.charts, name='charts_home'),
path('charts_ajax/', views.charts_ajax, name='render_charts_ajax')

htmlhtml文件中存在多个问题。
</html>
{% endif %}
<div></div>
{% endblock js %}

您在html结束后有了div。 html结束后，您不应有任何内容。这里很少有其他组织问题。我通常会有一个块内容，然后在您将所有内容都放在块js中的同时块js。我会清理的。现在，您还添加了datables。您可以按此处所述添加按钮。https://datatables.net/extensions/buttons/examples/initialisation/custom.html但是，如果我是您，我将尝试使其与简单表一起使用，然后转到datables。 
<html>
<head>
<meta charset="utf-8">
<title>Django Highcharts Example</title>
</head>
<body>
<div id="container">
</div>
<button id="render_chart" type="button">Render Chart</button>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script>
$(document).ready(function(){
   $('#render_chart').on('click', function(e){
       $.ajax({
           url: "{% url 'render_charts_ajax'%}",
           type: "GET",
           dataType: "json",
           success: function (data) {
               console.log(data.charts[0].saleslm)
               Highcharts.chart('container',{
                   chart:{
                       type:'bar'
                   },
                   title:{
                     text:"Sales Last Month"
                   },
                   series:[{
                       name:"Sales LM",
                       data:[parseInt(data.charts[0].saleslm)]
                   }]
               })
           }
       })
   })
});
</script>

</body>
</html>


您的json可能需要进行一些处理才能正确显示图表。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.