如何使用 construct_homepage_panels 挂钩将 Chart.js 添加到 Wagtail 主页面板？

Question

我正在修改我的 Wagtail 应用程序的主仪表板以提供更多 useful/relevant 数据，例如未结工作订单的数量或客户数量。

我在让 Chart.js 显示在我的仪表板中时遇到了一些问题。我已确认资源 chart.js（版本 2.8.0）正在加载，我的 canvas 元素也已加载到页面上。不过，图表不会显示。

这是一些代码。这些都在我的 'dashboard' 应用程序中。

wagtail_hooks.py

class WelcomePanel:
    order = 5000

    def __init__(self, request):
        self.request = request
        self.logged_in_user = request.user.username

    def render(self):
        return render_to_string('wagtailadmin/dashboard.html', {
            'logged_in_user': self.logged_in_user,
        }, request=self.request)

# simply pass the 'request' to the panel
@hooks.register('construct_homepage_panels')
def add_another_welcome_panel(request, panels):
    panels.append(WelcomePanel(request))

templates/wagtailadmin/dashboard.html

{% load static %}

<h1> This text is visible </h1>
<canvas id="pie_chart" height="604" width="1210" style="display: block; width: 605px; height: 302px;"></canvas>

<script src="{% static 'js/chart.js' %}" type="text/javascript"><script>

<script tyle="text/javascript">
var stars = [135850, 52122, 148825, 16939, 9763];
var frameworks = ["React", "Angular", "Vue", "Hyperapp", "Omi"];

document.addEventListener('DOMContentLoaded', function() {
  var ctx = document.getElementById("pie_chart").getContext('2d');
  var myChart = new Chart(ctx, {
  type: "pie",
  data: {
    labels: frameworks,
    datasets: [
      {
        label: "Github Stars",
        data: stars,
        backgroundColor: [
          "rgba(255, 99, 132, 0.2)",
          "rgba(54, 162, 235, 0.2)",
          "rgba(255, 206, 86, 0.2)",
          "rgba(75, 192, 192, 0.2)",
          "rgba(153, 102, 255, 0.2)"
        ],
        borderColor: [
          "rgba(255, 99, 132, 1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)",
          "rgba(153, 102, 255, 1)",
        ],
        borderWidth: 1
      }
    ]
  }
});
}, false);
</script>

编辑我已经尝试设置 async defer 以及事件侦听器以仅在 DOM 完全加载 DOMContentLoaded.

时执行图表创建

Answer 1

我在本地没有运行此代码，只是一个快速建议 - 您可能需要等到 DOM 在运行加载 getElementById 之前加载，并且new Chart 部分。

这是因为在页面完全呈现之前，文档查询return什么也不会。

<script tyle="text/javascript">
// note: you can set up your stars/frameworks and other data outside of the callback below
// the key thing is that the DOM writing and dom query (getElementById) are inside the callback

document.addEventListener('DOMContentLoaded', function() {

   var ctx = document.getElementById("pie_chart");
   var myChart = new Chart( /* ... code here */);

}, false);

</script>

您可以在此处阅读更多相关信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

这里也有一个问题

如何使用 construct_homepage_panels 挂钩将 Chart.js 添加到 Wagtail 主页面板？

How to add Chart.js to Wagtail Homepage panels using construct_homepage_panels hook?

javascript

python

django

wagtail

chart.js