使用 ChartJS Django 编辑 HTML

问：

你能帮忙用 ChartJS Django 编辑 HTML 吗？

当我使用 ChartJS 将 {% 扩展“base.html”%} 添加到 HTML 时，它只返回页面 base.html 而没有图表（删除 base.html 时，它会向我显示图表）。

{#{% extends 'base.html' %}#}


{% block content %}

  <div id="container" style="width: 75%;">
    <canvas id="statistics" data-url="{% url 'calory_counter:statistics' %}"></canvas>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
  <script>

    $(function () {

      var $statistics = $("#statistics");
      $.ajax({
        url: $statistics.data("url"),
        success: function (data) {

          var ctx = $statistics[0].getContext("2d");

          new Chart(ctx, {
            type: 'bar',
            data: {
              labels: data.labels,
              datasets: [{
                label: 'Date',
                backgroundColor: 'blue',
                data: data.data
              }]
            },
            options: {
              responsive: true,
              legend: {
                position: 'top',
              },
              title: {
                display: true,
                text: 'Calorie consumption'
              }
            }
          });

        }
      });

    });

  </script>

{% endblock %}