Django 扩展标签使 JS 图表无法加载

我正在使用一个基本.html文件来创建所有子模板的导航栏。

我面临的问题是，这不再加载我的JS图表(谷歌图表)会干扰它们。任何人都可以阐明为什么会发生这种情况，也许是可能的解决方法？

基.html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% block tab_menu %}
<div class="topnav">
<a href="/index">Home</a>
<a href="/index/devops">Devops</a>
<a href="/index/qa">QA</a>
<a href="/index/frontend">Frontend</a>
<a href="/index/middleware">Middleware</a>
<a href="/index/portal">Portal</a>
<
</div>
{% endblock tab_menu %}

</body>
</html>

儿童.html：

<!DOCTYPE html>
{% extends "KPI/base.html" %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(VelocityChart);
function VelocityChart() {
var data = google.visualization.arrayToDataTable([
['Status', 'Number of Tasks'],
['Completed', {{completed_velocity}}],
['Incompleted',  {{incomplete_velocity}}],
]);
var options = {
title: '',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('velocity_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
{% block tab_menu %}
{{ block.super }}
<h2> QA Dashboard</h2>
<div id="velocity_chart"></div>

{% endblock tab_menu %}
</body>
</html>

base.html 文件中的代码在其他模板上工作正常，但不会加载子模板中的图表。

此外，图表在没有实现导航栏的情况下加载良好

**编辑了儿童{% extends "KPI/base.html" %}的放置.html

这是因为当您扩展{% block %}标签时.html它上方的任何内容都不会插入到基中。您需要创建{% block %}标签来封装脚本以将它们插入 base.html。

扩展模板时，块标记之外的所有内容都会被丢弃。

添加了一个示例：

[[基地.html]]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% block script %}  <!-- add matching block to contain insert -->
{% endblock %}
</head>
<body>
{% block tab_menu %}
<div class="topnav">
<a href="/index">Home</a>
<a href="/index/devops">Devops</a>
<a href="/index/qa">QA</a>
<a href="/index/frontend">Frontend</a>
<a href="/index/middleware">Middleware</a>
<a href="/index/portal">Portal</a>
<
</div>
{% endblock tab_menu %}

</body>
</html>

[[儿童.html]]

<!DOCTYPE html>
{% extends "base.html" %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--  add block tag (along with endblock below) to insert your script -->
{% block script %}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(VelocityChart);
function VelocityChart() {
var data = google.visualization.arrayToDataTable([
['Status', 'Number of Tasks'],
['Completed', {{completed_velocity}}],
['Incompleted',  {{incomplete_velocity}}],
]);
var options = {
title: '',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('velocity_chart'));
chart.draw(data, options);
}
</script>
{% endblock %}
</head>
<body>
{% block tab_menu %}
{{ block.super }}
<h2> QA Dashboard</h2>
<div id="velocity_chart"></div>

{% endblock tab_menu %}
</body>
</html>

相关内容

最新更新

热门标签：