Javascript 如何创建月分析总数的图表？

我用Django创建了一个客户管理系统。每个用户都有几个客户，每个客户都有几个报告。用户对这些报告进行分析并将其发送给用户。此过程是

ApprovalProcess

。我有一个

ApprovalProcess

模型，我想创建一个折线图，显示一年中每月进行的分析总数。（使用

begin\u date

）我该怎么做

更新：我可以在折线图中真实显示我的数据，但它只显示输入的数据。例如，今年我只有两个批准月份，但我希望将所有月份显示为图例。我将添加一张图片以供理解

型号.py

class ApprovalProcess(models.Model):
    id = models.AutoField(primary_key=True)
    user_id = models.ForeignKey(UserProfile, on_delete=models.CASCADE, null=True, related_name='starter')
    doc_id = models.ForeignKey(Pdf, on_delete=models.CASCADE, null=True)
    begin_date = models.DateTimeField(null=True)
    ...

def approval_context_processor(request):
 today = datetime.now()
 line_data = ApprovalProcess.objects.filter(begin_date__year=today.year).values('begin_date__month').annotate(Count('id')).order_by('-id__count')  

#Print: <QuerySet [{'begin_date__month': 4, 'id__count': 7}, {'begin_date__month': 3, 'id__count': 1}]>

视图.py

class ApprovalProcess(models.Model):
    id = models.AutoField(primary_key=True)
    user_id = models.ForeignKey(UserProfile, on_delete=models.CASCADE, null=True, related_name='starter')
    doc_id = models.ForeignKey(Pdf, on_delete=models.CASCADE, null=True)
    begin_date = models.DateTimeField(null=True)
    ...

def approval_context_processor(request):
 today = datetime.now()
 line_data = ApprovalProcess.objects.filter(begin_date__year=today.year).values('begin_date__month').annotate(Count('id')).order_by('-id__count')  

#Print: <QuerySet [{'begin_date__month': 4, 'id__count': 7}, {'begin_date__month': 3, 'id__count': 1}]>

def批准\u上下文\u处理器（请求）：
今天=日期时间。现在（）
行数据=ApprovalProcess.objects.filter（开始日期年=today.year）。值（'begin日期月'）。注释（计数（'id'））。订单依据（'-id\u计数'）
#打印：

dashboard.html

...
<div class="chart-container" style="min-height: 375px">
    <canvas id="statisticsChart" ></canvas>
</div>
<script>
var ctx = document.getElementById('statisticsChart').getContext('2d');

var number_analysis = []
var label_data = []

   {% for data in line_data %}
       number_analysis.push({{ data.id__count }})
       label_data.push( {{data.begin_date__month }})
    {% endfor %}

       var statisticsChart = new Chart(ctx, {
       type: 'line',
       data: {
           labels: label_data,
           datasets: [ {
               label: "# of Approval",
               borderColor: '#54bbf3',
               pointBackgroundColor: 'rgb(84,187,243, 0.6)',
               pointRadius: 0,
               backgroundColor: 'rgba(84,187,243, 0.4)',
               legendColor: '#f3545d',
               fill: false,
               borderWidth: 1,
               data: number_analysis,
           }, ]
       },
       options : {
           responsive: true,
           maintainAspectRatio: false,
           legend: {
               display: true
           },
           tooltips: {
               bodySpacing: 5,
               mode:"nearest",
               intersect: 0,
               position:"nearest",
               xPadding:20,
               yPadding:20,
               caretPadding:10
           },
           layout:{
               padding:{left:5,right:5,top:15,bottom:15}
           },
           scales: {
               yAxes: [{
                   ticks: {
                       fontStyle: "500",
                       beginAtZero: true,
                       maxTicksLimit: 5,
                       padding: 10
                   },
                   gridLines: {
                       drawTicks: false,
                       display: false
                   }
               }],
               xAxes: [{
                   gridLines: {
                       zeroLineColor: "transparent"
                   },
                   ticks: {
                       padding: 10,
                       fontStyle: "500",


                   }
               }]
       },

</script>

。。。
var ctx=document.getElementById（'statisticsChart'）.getContext（'2d'）；
var数_分析=[]
变量标签_数据=[]
{u data%}行中的数据为%
number_analysis.push（{{data.id_uucount}}）
label_data.push（{data.begin_date_uumonth}）
{%endfor%}
var统计图表=新图表（ctx{
键入：“行”，
数据：{
标签：标签数据，
数据集：[{
标签：“#批准”，
边框颜色：“#54bbf3”，
pointBackgroundColor:“rgb（84187243，0.6）”，
点半径：0，
背景颜色：“rgba（84187243，0.4）”，
legendColor:“#f3545d”，
填充：假，
边框宽度：1，
数据：数字分析，
}, ]
},
选项：{
回答：是的，
MaintaintAspectRatio:false，
图例：{
显示：真
},
工具提示：{
车身间距：5，
模式：“最近的”，
交集：0，
位置：“最近”，
加上：20，
加上：20，
护理添加：10
},
布局：{
填充：{左：5，右：5，上：15，下：15}
},
比例：{
雅克斯：[{
滴答声：{
字体：“500”，
贝吉纳泽罗：是的，
马克斯：5，
填充：10
},
网格线：{
drawTicks:false，
显示：假
}
}],
xAxes：[{
网格线：{
zeroLineColor:“透明”
},
滴答声：{
填充：10，
字体：“500”，
}
}]
},

这里的确切问题是什么？@Sumithran我如何在折线图中逐月显示一年内的批准总数？后端或前端是否存在问题？不清楚。@Sumithran我已更新了我的问题。你能再看一次吗？