如何使用Django中的高图显示年增长率图表?

时间:2019-04-02 02:27:32

标签: python django highcharts

我正在尝试使用Django中的高图来呈现年增长率。只有一个 Branch 模型,在视图中,我试图生成按年份分组的查询集。因为我只有一个模型,所以只有到那个年份才需要特定的Branch实例,而我需要获取每年的所有Branch实例以可视化数据。

models.py

import datetime
from django.db import models
from django.core.validators import MaxValueValidator, MinValueValidator


def current_year():
    return datetime.date.today().year


def max_value_current_year(value):
    return MaxValueValidator(current_year())(value)

class Branch(models.Model):

    branch_id = models.IntegerField()
    name = models.CharField(max_length=50)
    sales_amount = models.IntegerField()
    date = models.PositiveIntegerField(
        default=current_year(), validators=[MinValueValidator(1984), max_value_current_year])

views.py

from django.db.models import Count, Q, Sum
from django.shortcuts import render
import json

from .models import Branch



def index(request):
    dataset = Branch.objects.values('date', 'sales_amount').annotate( sales=Count('sales_amount'))

    categories = list()
    sales = list()

    for entry in dataset:

        categories.append('Year %s' % entry['date'])
        sales.append(entry['sales_amount'])


    return render(request, 'index.html', {
        'categories': json.dumps(categories),
        'sales': json.dumps(sales),
    })

index.html

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HomePage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <script src = "{% static 'js/jquery.min.js' %}"></script>
</head>
<body>
    <div id="container" ></div>
    <script src = "{% static 'highcharts/code/highcharts.js' %}"></script>
    <script>
        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Annual Sales Growth'
            },
            xAxis: {
                categories: {{ categories|safe }}
            },
            series: [{
                name: 'Total Sales',
                data: {{ sales }},
                color: 'green'
            },
            ]
        });
    </script>
</body>
</html>



预期结果是,如果我在2015年有两个分支,则应该有2个直方图分支栏。如果我在2016年添加一个新的分支实例,应该有三个直方图条显示(以前是两个,最近才添加),如果我删除了一个实例,则应该有两个。但是我实际的输出是每年有单独的酒吧。例如:如果2015年有两个分支实例,而2016年有一个分支实例,则显示三个独立的分支,两个分支表示2015年,一个分支表示2016年。

0 个答案:

没有答案