如何使用chartjs在图表中显示带日期时间字段的django模型?

tgabmvqs  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(178)

我有一个叫做ScanBatch的Django模型,Scan Batch由时间戳(datetime字段),域(char字段)和找到的ID总数(integer字段)等字段组成。
我的图表代码是:

const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, { 
        type: 'bar',
        data: {
            labels: [],
            datasets: []
        },

        options: {
            scales: {
              yAxes: [{
                id: 'A',
                type: 'linear',
                position: 'left',
              }, {
                id: 'B',
                type: 'linear',
                position: 'right',
                ticks: {
                  max: 1,
                  min: 0
                }
              }]
            }
          }
    });

型号代码为

class ScanBatch(models.Model):
   domain = models.CharField(max_length=255)
   timestamp = models.DateTimeField(auto_now_add=True)
   valid_ids_found = models.IntegerField(default=0)

如何让图表显示django的历史批次数据,然后将其输出到图表?
我希望按日期显示历史批次,并按域分组。
要绘制的数据的示例如下:
www.someexample.com|2022年9月3日|三十四
www.someexample.com|2022年9月4日|五十五人

oyxsuwqo

oyxsuwqo1#

首先,你需要得到时间戳作为日期,连同域。然后,你将需要总结所有的ID的权利?(为每一天)
要执行此操作,您可以从以下位置获取:

已添加域

编辑开始
chartdata = ScanBatch.objects.all().values('timestamp__date','domain').annotate(models.Sum('valid_ids_found'))

然后将其传递到模板上。
在模板中,为了准备数据,你需要在javascript中迭代它。

const chartData = {{ chart_data |safe }};
let arr = [];
let arrlabels = [];
let domainlabels = [];
for (let value of Object.values(chartData)) {
  arr.push(value.valid_ids_found__sum); 
  arrlabels.push(value.timestamp__date); 
  domainlabels.push(value.domain)
}
console.log(chartData)
编辑结束

现在,您已经准备好图表数据,可以在图表中使用。

const chartData = {{ chart_data |safe }};
let arr = []
let arrlabels = []
for (let value of Object.values(chartData)) {
  arr.push(value.valid_ids_found__sum); 
  arrlabels.push(value.timestamp__date); 
}
const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, { 
        type: 'bar',
        data: {
            labels: arrlabels ,
            datasets: arr
        },

        options: {
            scales: {
              yAxes: [{
                id: 'A',
                type: 'linear',
                position: 'left',
              }, {
                id: 'B',
                type: 'linear',
                position: 'right',
                ticks: {
                  max: 1,
                  min: 0
                }
              }]
            }
          }
    });

这至少是第一部分,我没有足够的知识Chart.js区分域也。对不起伙计。可能会帮助你沿着!

相关问题