我在显示图表时遇到了一些问题。我得到错误"；图表未定义"；尽管它似乎是在我将鼠标悬停在javascript模板中时定义的。这是我的代码：
javascript文件
var myChart = new Chart("myChart", {
type: "bar",
data: {
labels: ["Lag 1", "Lag 2"],
data: [10, 5],
backgroundColor: ["red", "green"]
},
options: {}
});
html文件
<div>
<link href="{% static 'main/formwrapper.css' %}" rel="stylesheet" />
<div class="desktop1-formwrapper">
<div class="desktop1-frame2">
<canvas id="myChart" style="width: 60%"></canvas>
</div>
<div class="desktop1-frame1"></div>
<button class="desktop1-buttondefault">
<span class="desktop1-text3">Nästa runda</span>
</button>
</div>
</div>
我扩展的基本html文件，以及指向javascript模板和chart.js 的链接
<script src="{% static 'main/dropDownToggle.js' %}"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js">
</script>
我可能错过了一些简单的东西，但我想不通，谢谢你的建议！
更新。我链接javascript 的整个base.html
<!DOCTYPE html>
{% load static %}
<html lang="english">
<head>
<title>Med Andra Ord</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta property="twitter:card" content="summary_large_image" />
<style data-tag="reset-style-sheet">
html { line-height: 1.15;}body { margin: 0;}* { box-sizing: border-box; border-width: 0; border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0;}button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}button,select { text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus { outline: 1px dotted ButtonText;}a { color: inherit; text-decoration: inherit;}input { padding: 2px 4px;}img { display: block;}html { scroll-behavior: smooth }
</style>
<style data-tag="default-style-sheet">
html {
font-family: Inter;
font-size: 16px;
}
body {
font-weight: 400;
font-style:normal;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
line-height: 1.15;
color: var(--dl-color-gray-black);
background-color: var(--dl-color-gray-white);
}
</style>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap"
data-tag="font"
/>
<link rel="stylesheet" href="{% static 'main/style.css' %}" />
<script src="{% static 'main/dropDownToggle.js' %}"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js">
</script>
</head>
<body>
<div>
<link href="{% static 'main/desktop1.css' %}" rel="stylesheet" />
<div class="desktop1-container">
<div class="desktop1-desktop1">
<span class="desktop1-text">
<span class="desktop1-text01">MED ANDRA</span>
<span class="desktop1-text02">ORD</span>
</span>
</div>
</div>
</div>
{% block content %}{% endblock %}
</body>
</html>
这应该可以工作。
<!DOCTYPE html>
{% load static %}
<html lang="english">
<head>
<title>Med Andra Ord</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta property="twitter:card" content="summary_large_image" />
<style data-tag="reset-style-sheet">
html { line-height: 1.15;}body { margin: 0;}* { box-sizing: border-box; border-width: 0; border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0;}button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}button,select { text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus { outline: 1px dotted ButtonText;}a { color: inherit; text-decoration: inherit;}input { padding: 2px 4px;}img { display: block;}html { scroll-behavior: smooth }
</style>
<style data-tag="default-style-sheet">
html {
font-family: Inter;
font-size: 16px;
}
body {
font-weight: 400;
font-style:normal;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
line-height: 1.15;
color: var(--dl-color-gray-black);
background-color: var(--dl-color-gray-white);
}
</style>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap"
data-tag="font"
/>
<link rel="stylesheet" href="{% static 'main/style.css' %}" />
<script src="{% static 'main/dropDownToggle.js' %}"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js">
</script>
</head>
<body>
<div>
<link href="{% static 'main/desktop1.css' %}" rel="stylesheet" />
<div class="desktop1-container">
<div class="desktop1-desktop1">
<span class="desktop1-text">
<span class="desktop1-text01">MED ANDRA</span>
<span class="desktop1-text02">ORD</span>
</span>
</div>
</div>
</div>
<div>
<link href="{% static 'main/formwrapper.css' %}" rel="stylesheet" />
<div class="desktop1-formwrapper">
<div class="desktop1-frame2">
<canvas id="myChart" style="width: 60%"></canvas>
</div>
<div class="desktop1-frame1"></div>
<button class="desktop1-buttondefault">
<span class="desktop1-text3">Nästa runda</span>
</button>
</div>
</div>
{% block content %}{% endblock %}
<script>
const ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["Lag 1", "Lag 2"],
datasets: [{
label: '# of Votes',
data: [10, 5],
backgroundColor: [
"red", "green"
],
}]
},
options: {}
});
</script>
</body>
</html>