Добавление динамических данных в демонстрационный файл chart.js шаблона django

Я использую шаблон "start bootstrap4" для своего проекта Django. Я хочу отредактировать свои собственные данные в примере графика. Мне нужно изменить их в файле chart-pie-demo.js

Я использовал gspread и pandas для преобразования моего листа google в список словарей. Мой лист google выглядит следующим образом list: (Это очень длинный список, поэтому я привожу только несколько строк)

mylist=
[{'StartDate': '2021-10-02', 'ID': 11773, 'Name': Mike, 'Days':66 },
{'StartDate': '2021-10-03', 'ID': 15673, 'Name': Jane, 'Days':65}, 
{'StartDate': '2021-10-03', 'ID': 95453, 'Name': Jane, 'Days':65}, 
{'StartDate': '2021-10-03', 'ID': 15673, 'Name': Mike, 'Days':65}, 
... 
{'StartDate': '2021-10-5', 'ID': 34653, 'Name': Jack, 'Days':63}]

Приведенный выше список определен в моем views.py

Мой 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,
  },
});

Я хочу подсчитать количество строк с именем "Mike", количество строк с именем "Jane" и количество строк с именем "Jack", и заменить образец data: [55, 30, 15] своим собственным числом.

Я новичок в python, js и Django, и я знаю, что это очень простой вопрос. Пожалуйста, посоветуйте, что мне делать?

Вы уже упоминали об использовании 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 файл и поместить код непосредственно в тег script в вашем html (я взял "index.html" для примера здесь).

Тогда вы можете просто перейти к тегу script и:

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

В целом, основная идея django такова: вы создаете представление. Вы создаете url, указывающий на представление. Представление рендерит HTML файл (или вообще "файл"; файлы word и другие файлы тоже работают). "Рендеринг" в основном означает выполнение функций шаблонизации и помещение значений, которые вы дали ему в контексте, в соответствующие имена переменных, написанные в двойных квадратных скобках

После этого файл обслуживается. Это означает, что все, что вы делаете в шаблоне, выполняется до запуска javascript, потому что сервер создает файл, используя теги шаблона, и только после этого он отправляется в браузер, который затем выполняет javascript. Для вашего примера вы могли бы изобразить django context и теги шаблона просто как базовое "используйте все, что я поместил в эту переменную, чтобы заменить ее в моем 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 }}],
...
Вернуться на верх