我在几个项目中使用这个库已经快一年了,昨天它像往常一样工作得很好,但今天我在所有项目上都遇到了错误:
未捕获的引用错误:Highcharts 未定义
我使用普通 JavaScript、HTML 和 CSS,并在 HTML head 标签上导入 CDN,因为这就是我的工作方式。
我尝试使用 Highcharts GTP 并测试了一个简单的代码以确保 CDN 正常工作,但我在本地测试中遇到了相同的错误。这是de AI给我提供的代码:
<!DOCTYPE html>
<html>
<head>
<title>Stock Chart Example</title>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
</head>
<body>
<div id="container" style="height: 400px; min-width: 310px"></div>
<script>
document.addEventListener("DOMContentLoaded", function () {
Highcharts.stockChart("container", {
rangeSelector: {
selected: 1,
},
title: {
text: "AAPL Stock Price",
},
series: [
{
name: "AAPL",
data: [
[Date.UTC(2021, 0, 1), 132.43],
[Date.UTC(2021, 1, 1), 126.6],
[Date.UTC(2021, 2, 1), 123.9],
[Date.UTC(2021, 3, 1), 134.16],
[Date.UTC(2021, 4, 1), 127.79],
[Date.UTC(2021, 5, 1), 139.91],
[Date.UTC(2021, 6, 1), 145.11],
[Date.UTC(2021, 7, 1), 156.3],
[Date.UTC(2021, 8, 1), 145.0],
[Date.UTC(2021, 9, 1), 149.55],
[Date.UTC(2021, 10, 1), 161.0],
[Date.UTC(2021, 11, 1), 177.57],
],
tooltip: {
valueDecimals: 2,
},
},
],
});
});
</script>
</body>
</html>
这就是始终使用可以随时更新而无需测试的最新版本的风险,也是为什么许多人(包括我自己)主张不要依赖最新版本并在升级时始终测试更新版本的原因。使用 highcharts CDN(或任何其他托管脚本)时,您应该指定所需的特定版本。执行此操作时,您不会对应用程序所依赖的库的任何“损坏”更新感到惊讶。
快速查看 Highcharts CDN 显示当前版本(截至 2024 年 12 月 20 日)为 12.1.1,已于今天发布,之前的版本 12.1.0 于 2024 年 12 月 17 日发布.
尝试更新您的脚本标签以明确使用以前的版本:
<script src="https://code.highcharts.com/stock/12.1.0/highstock.js"></script>
似乎与缓存有关 - 最近发布 v12 后,处理模块的新方式可能会导致图表渲染出现问题 - 请参阅发行说明中的更多详细信息:https://www.highcharts.com /blog/changelog/#highcharts-v12.0.0
请尝试清理浏览器缓存并分享结果。