[英]It seems I cannot use JS code from CDN import
I have two HTML buttons, each linked to a specific JavaScript function.我有两个 HTML 按钮,每个按钮都链接到一个特定的 JavaScript 函数。 The first button triggers a function codded like so:
第一个按钮触发一个函数,代码如下:
function add() {
var newScript = document.createElement("script");
newScript.src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js";
document.head.appendChild(newScript);
}
The second button triggers the following function:第二个按钮触发以下功能:
function draw() {
const ctx = document.getElementById('myChart').getContext('2d');
const 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: {
y: {
beginAtZero: true
}
}
}
});
In function number 2, I am using a sample from www.chartjs.org .在功能编号 2 中,我使用了来自www.chartjs.org的示例。 To work, it needs the page to have loaded the script referred to in the first function.
要工作,它需要页面加载了第一个函数中引用的脚本。
After clicking on the button 1 then on the button 2, I am expecting to see in my head element a script element, src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js, which I do see, via the browser console.单击按钮 1 然后单击按钮 2 后,我希望在我的 head 元素中看到一个脚本元素,src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart .js,我确实看到了,通过浏览器控制台。
On my page, I am expecting to see (after clicking on my second button) a graph, produced by the ChartJS code.在我的页面上,我希望看到(在单击我的第二个按钮后)由 ChartJS 代码生成的图表。 This very element is missing.
缺少这个元素。 Instead, I have an error in my console, saying: 'Chart is not defined at HTMLButtonElement.draw'
相反,我的控制台中有一个错误,说:“图表未在 HTMLButtonElement.draw 中定义”
Why do I have this error?为什么我有这个错误? Why is my chart not showing up?
为什么我的图表不显示?
Thank you for stopping by :) (y)感谢您光临:) (y)
One hacky
solution is to just include the entire script in your function.一种
hacky
解决方案是将整个脚本包含在您的函数中。 ie IE
function add() {
/*!
* Chart.js v2.9.4
* https://www.chartjs.org
* (c) 2020 Chart.js Contributors
* Released under the MIT License
*/
//The entire contents of https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js pasted here
}
Just add html script element, before the your script is evaluated.只需在评估您的脚本之前添加 html 脚本元素。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script>
function draw() {
// your draw function
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.