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

tgabmvqs 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(207)

我有一个叫做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日|五十五人

chart.js

来源：https://stackoverflow.com/questions/73434031/how-to-display-django-models-with-datetime-field-in-chart-using-chartjs

1条答案

按热度按时间

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区分域也。对不起伙计。可能会帮助你沿着！

展开查看全部

赞(0）回复(0）举报 2022-11-06

我来回答

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

1条答案

已添加域

编辑开始

编辑结束

相关问题

热门标签

最新问答