我正在尝试使用Chartist.js框架为我的网站创建图表和图表。但由于某种原因,我不断收到错误“Chartist未定义”
我无法弄清楚如何修复此错误。请参阅以下代码:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Chartist.js - Simple line chart</title>
<script>
// THIS IS WHERE THE ERROR OCCURS
new Chartist.Line('.ct-chart', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[2, 3, 2, 4, 5],
[0, 2.5, 3, 2, 3],
[1, 2, 2.5, 3.5, 4]
]
}, {
width: 500,
height: 300
});
</script>
</head>
<body>
<div class="ct-chart"></div>
</body>
</html>
有谁知道我做错了什么? 提前致谢。
答案 0 :(得分:4)
将脚本移动到页脚:
<!DOCTYPE html>
<html>
<head>
<link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Chartist.js - Simple line chart</title>
</head>
<body>
<div class="ct-chart"></div>
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script>
// THIS IS WHERE THE ERROR OCCURS
new Chartist.Line('.ct-chart', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[2, 3, 2, 4, 5],
[0, 2.5, 3, 2, 3],
[1, 2, 2.5, 3.5, 4]
]
}, {
width: 500,
height: 300
});
</script>
</body>
</html>
http://plnkr.co/edit/3sAdiBJaaue3x9kgBRZw?p=preview
它的工作就像一个魅力:)