如何在模块外使用ChartJS?

问题描述 投票:0回答:1

我正在尝试在纯JavaScript中使用chart.js,例如

<html>
<body>
<DIV>my contents</div>
<script src="/static/defapp/js/chart.min.js"></script>
<script>
const myChart = new Chart(ctx, {...});
</script>
</body>
</html>

(我的环境位于aws隔离子网中,因此无法访问互联网,因此,我无法使用

CDN

上面的代码显示这样的错误

未捕获的语法错误:无法在模块外部使用 import 语句(位于 Chart.min.js:1:1)

然后我检查了这篇文章

它使用

chart.umd.js
,但是我在
GitHub
中找不到 chart.umd.js

我在哪里可以找到这个?

javascript chart.js
1个回答
2
投票

将 Chart.js 与 CDN 结合使用:

不要通过本地文件路径包含 Chart.js 库,而是尝试使用内容交付网络 (CDN) 链接来包含该库。这种方法有时可以帮助避免与模块语法相关的问题。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

检查 Chart.js 版本兼容性: 确保您使用的 Chart.js 版本与普通 JavaScript 用法兼容。旧版本的 Chart.js 可能不完全支持这种使用模式。

将 Chart.js 代码包装在函数中: 将 Chart.js 代码包装在函数内,并在文档加载后调用该函数。这可确保 Chart.js 库在尝试使用之前已完全加载。

<script>
  function createChart() {
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {...});
  }
  window.onload = createChart;
</script>

使用Chart.js模块版本:

如果您的项目支持 ES6 模块,请考虑使用 Chart.js 的模块版本。此版本旨在与现代 JavaScript 模块语法配合使用。

<script type="module">
  import Chart from 'https://cdn.jsdelivr.net/npm/chart.js';
  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {...});
</script>

检查浏览器兼容性:

确保您使用的浏览器支持 Chart.js 使用的 JavaScript 功能。一些较旧的浏览器可能不完全支持现代 JavaScript 语法。

© www.soinside.com 2019 - 2024. All rights reserved.