如何基于多对一关系过滤 Highchart 图数据？

Question

我有这个Django应用程序，我使用 Highchart 显示一些数据（这里只是一个例子）。

我有两个单独的视图，一个视图在Product表上执行过滤器（除其他外），另一个视图从History表构建 Json以“传递”到绘图的 AJAX 函数（实际数据非常重）。

数据基于History我拥有的表格product_id, year, quantity（我想显示随时间变化的数量）。

在我的模型我也有一个表Products与products, category（每个产品都有一个类别，多个产品可以共享相同的类别）。

这两个表与字段是一对多的关系product。

在我的模板中，我希望用户能够products按category字段过滤（即：过滤类别为“A”的产品），并且此过滤器还应更新图表（即：我只想查看“A”类产品）。

在我的代码下面，我尝试了很多尝试，但到目前为止都没有奏效。

请让我知道代码是否包含您需要的所有信息，我已尝试仅获取必要信息。

模型.py

class Products(models.Model):
    product = models.TextField(primary_key=True)
    category = models.TextField(blank=True,null=True)
    
    # ...
    
class HistoryProducts(models.Model):
    product_id = models.ForeignKey(Products)
    year = models.TextField(blank=True, null=True)
    quantity = models.DecimalFeld(..)
    
    # ...

过滤器.py

import django_filters
class ProductsFilter(django_filters.FilterSet):
    category_contains = CharFilter(field_name='category', lookup_expr='icontains') 
    class Meta:
         model = Products
         fields = ['category']

视图.py

def index(request):
    products = Products.objects.all()
    myFilter = ProductsFilter(request.GET, queryset=products)
    products = myFilter.qs
    
    # ...
    
    return render(request, 'index.html', context={..})
    
def chart_data(request):
    
    # maybe here we should filter History by myFilter, but can't find how
    # ...
    
    # calculate total quantity
    history = HistoryProducts.objects.values('year').order_by('year').annotate(Total=Sum('quantity'))
    
    
    chart = {
        'chart': {'type': 'column'},
        'title': {'text': 'Quantity by Year'},
        'series': [{
            'name': 'Quantity',
            'data': list(map(lambda row: {'name': round(row['year']),'y': round(row['Total'])}, history))
        }]
    }
    
    return JsonResponse(chart)

索引.html

<!-- Filter -->
<form method="GET">
   {{myFilter.form}}
   <button type="submit"> Filter</button>
</form>

<!-- Chart -->
<div>
    <div id="container" data-url="{% url 'chart_data' %}"></div>
</div>

<!-- Scripts -->
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script>
  // highchart function
  $.ajax({
    url: $("#container").attr("data-url"),
    dataType: 'json',
    success: function (data) {
      Highcharts.chart("container", data);
    }
  });
</script>

---

我想我的问题是：是否可以将构建的同一个表单过滤器“连接”django-filters到多个模型？

或者更一般地说，有人会如何解决这种问题？我愿意接受任何建议。谢谢

编辑 - -

我找到了一个不漂亮的解决方案，并且还会使页面变慢。

视图.py

def index(request):
    products = Products.objects.all()
    myFilter = ProductsFilter(request.GET, queryset=products)
    products = myFilter.qs

    # get the id filtered
    ids = []
    qs = products.values_list('products',flat=True)
    for i in qs:
        ids.append(i)

    # use ids to filter History
    history = History.objects.filter(product_id_in=ids).values('year').order_by('year').annotate(Total=Sum('quantity'))

    # make the json here
    chart = {
        'chart': {'type': 'column'},
        'title': {'text': 'Quantity by Year'},
        'series': [{
            'name': 'Quantity',
            'data': list(map(lambda row: {'name': round(row['year']),'y': round(row['Total'])}, history))
        }]
    }
    dump = json.dumps(chart)

    # return the json to the template

    return render(request, 'index.html', context={..})

现在我只需要模板中的这部分：

<script>
  Highcharts.chart('container', {{ chart|safe }});
</script>

基本上我将 Json 移动到我过滤数据的同一个视图中，但这要慢得多。

Answer 1

这更像是一个 jQuery/Javascript 问题，但假设您将一个id属性分配给其 HTML 元素，然后$.getJSON将GET其用于chart_data视图中的数据，则应该可以捕获表单提交。

https://api.jquery.com/submit/

例如

// Assuming you assigned id="filter-form" to your form
$('#filter-form').submit(function(event){
  event.preventDefault();
  var url = $("#container").attr("data-url");
  var formData = $('#filter-form').serialize()
  $.getJSON(url, formData, function(data){
      Highcharts.chart("container", data);
  })
});

然后你就可以像在你一样使用ProductsFilterfromrequest.GETchart_dataindex

def chart_data(request):
    
    products = Products.objects.all()
    myFilter = ProductsFilter(request.GET, queryset=products)
    products = myFilter.qs
    HistoryProducts.objects.filter(
        product_id__in=products
    ).values('year').order_by('year').annotate(
        Total=Sum('quantity')
    )
    
    
    chart = {
        'chart': {'type': 'column'},
        'title': {'text': 'Quantity by Year'},
        'series': [{
            'name': 'Quantity',
            'data': list(map(lambda row: {'name': round(row['year']),'y': round(row['Total'])}, history))
        }]
    }
    
    return JsonResponse(chart)