在 django 模板的演示 chart.js 文件中添加动态数据

Question

我正在为我的 Django 项目使用“start bootstrap4”模板。我想在示例图表中编辑我自己的数据。我需要在 chart-pie-demo.js 文件

中更改它

我已经创建了要添加到图表中的数据列表。数据定义在我的views.py:

def chart(request):
    sheet2022 = client.open('sheet 2022')
    instance = sheet2022.get_worksheet(0)
    mysheet = instance.get_all_records()
    
    rpending2022 = list(filter(lambda datapending2022: 

    Mi=len(tuple(d for d in rpending2022  if d['Receiver'] == 'Mike'))
    Lu=len(tuple(d for d in rpending2022  if d['Receiver'] == 'Lucy'))
    Ja=len(tuple(d for d in rpending2022  if d['Receiver'] == 'Jack'))
    
    mydata = [Mi, Lu, Ja]
    context = {'mydata': mydata}
    return render(request,'charts.html', context)

我的 chart-pie-demo.js 文件：

var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Direct", "Referral", "Social"],
    datasets: [{
      data: [55, 30, 15],
      backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
      hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
      hoverBorderColor: "rgba(234, 236, 244, 1)",
    }],
  },
  options: {
    maintainAspectRatio: false,
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      caretPadding: 10,
    },
    legend: {
      display: false
    },
    cutoutPercentage: 80,
  },
});

我想用我自己的 mydata 替换示例数据：[55, 30, 15]。当我在我的 chart-pie-demo.js 文件中更改它时，图表没有显示。我需要 link chart-pie-demo.js 文件中的数据位置吗？

Answer 1

您已经提到使用 pandas；这就是为什么假设您已经可以聚合名称。对于 django 部分：您将需要一个如下所示的视图：

def your_view(request):
  data = "[10, 20, 30]" # however your aggreated output will look.
  # for simplicity of this example I assume it as a string like that

  # you can pass variables to djangos frontend using context

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

所以基本上你可以把你的数据放在一个普通的 django 上下文中。如果你的 js 很短并且你想要一个快速简单的答案，最好删除 js 文件并将代码直接放入你的 html 中的脚本标记中（我假设“index.html”例如这里）。

然后您可以进入您的脚本标签并：

var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Direct", "Referral", "Social"],
    datasets: [{
      data: {{ data }} ,
...

总的来说，django 的基本思想是：创建一个视图。您创建一个指向视图的 url。该视图呈现一个 HTML 文件（或者一般来说，“文件”；word 文件和其他文件也可以）。 “呈现”基本上意味着执行模板函数并将您在上下文中提供的任何值放入双 curly 括号中编写的相应变量名称中。

之后文件送达。这意味着您在模板中所做的任何事情都会在 javascript 运行之前运行，因为服务器使用模板标签创建文件，然后将其发送到浏览器，然后浏览器执行 javascript。对于您的示例，您可以将 django 上下文和模板标记想象为基本的“使用我放入此变量的任何内容来替换我的 html/css/js/whatever 文件中的它”。

这意味着您还可以：

def your_view(request):

  context = {
    'data_one': 10
    'data_two': 20
    'data_three': 30
  }
  return render(request, 'index.html', context)

因此：

var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Direct", "Referral", "Social"],
    datasets: [{
      data: [{{ data_one }}, {{ data_two }}, {{ data_three }}],
...

在 django 模板的演示 chart.js 文件中添加动态数据

Add dynamic data in a demo chart.js file of a django template

html

javascript

python

django

chart.js