[英]'require is not defined' error when attempting to use chartjs in javascript code
我不需要節點和javascript。 我正在嘗試將chartjs合並到我的項目中。 我有一個鏈接到html文件的javascript文件。 這兩個文件如下所示:
Charts.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Charts</title>
</head>
<body>
<p id="paragraph">This will be the Charts page.</p>
<canvas id="myChart" width="400" height="400"></canvas>
<script src="js/charts.js"></script>
</body>
</html>
chart.js:
//jshint esversion:6
var chart = require('chart.js'); //what's going on here??
var paragraph = document.querySelector("#paragraph");
//set click event listener
paragraph.addEventListener("click", changeMessage);
function changeMessage() {
paragraph.textContent = "clicked!";
console.log(paragraph.textContent);
}
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
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)',
'rgba(255, 159, 64, 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)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
問題出在我導入chart.js依賴項的方式上。 線var chart = require('chart.js');
這是我正在嘗試的方法,但是在呈現html頁面時,我看到一個控制台錯誤,提示:“未捕獲的ReferenceError:未定義require”。 完全刪除thatt行會使程序抱怨它無法識別Chart
對象。
我在哪里錯了?
如果您在節點上,則需要npm install require.js。 如果您不在節點上,則可以使用ES6 Import。
我建議使用cdnjs庫導入。 只需將鏈接復制到Chart.js站點,然后將其放在html文件中即可。
<head>
<title>Charts</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js">
</head>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.