如何解决无法将库集成到HTML-Chart.JS
我正试图从Google Chrome扩展程序中的Chart.js
文档中打开示例图表。
但是,我在line 2
上遇到了一个Uncaught ReferenceError: Chart is not defined
错误。
我需要进行哪些调整才能解决此问题?
请记住,我将javascript放在外部文件中,而不是像文档中那样在html
文件中进行了本地化。由于chrome的安全引擎,因此必须这样做
HTML
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body class="background-opening-page">
<div>
<div>
<div>text</div>
</div>
</div>
<div>
<div id="line-of-text">a line of text</div>
<script src="popup.js"></script>
</div>
<div>
<canvas id="myChart" width="400" height="400"></canvas>
<script src="draw-chart.js"></script>
</div>
</body>
</html>
JavaScript
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,'rgba(255,206,86,'rgba(75,192,'rgba(153,102,255,159,64,0.2)'
],borderColor: [
'rgba(255,1)',1)'
],borderWidth: 1
}]
},options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
解决方法
在本地下载chart.js
文件,并添加到<head></head>
标记中-
<script src="path/to/chartjs/dist/Chart.js"></script>
也请将此<script src="draw-chart.js"></script>
移到<head></head>
标记后的Chart.js
标记中。您不应该在<script>
标签内添加<body>
标签。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。