Question

我有一些基于代理的建模的回购，并希望使用绘图/图表库来查看他们创建的数据。

我使用过chartjs，但我不确定是否可以导入它。我没有使用webpack browserify等，只是vanilla es6。我确实使用汇总来构建我的存储库中的变体：节点的cjs，单个文件es6和脚本的iife。但是除了npm之外没有构建系统运行脚本。 https://medium.com/@backspaces/es6-modules-part-1-migration-strategy-a48de0b7f112

鉴于极简主义的环境：

{{1}}

Answer 1

我对整个JS模块的新东西很新，但却有完全相同的问题。我使用以下代码使用它：

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Load Chart.js as ES2015 module</title>
    <script type="module">
      import 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js'
      
      const canvas = document.getElementById("chart");
      let chart = new Chart(canvas, {
        type: "line",
        data: {
          labels: ["1", "2", "3", "4", "5"],
          datasets: [{
            label: "Series 1",
            data: [1, 2, 3, 2, 1]
          }]
        }
      });
    </script>
  </head>
  <body>
    <canvas id="chart"></canvas>
  </body>
</html>

＆＃13;

我现在面临的问题是TypeScript编译器给出了以下错误：

'Chart' refers to a UMD global, but the current file is a module. Consider adding an import instead.

但如果你没有使用TypeScript并且上面的JS代码可以在浏览器中运行，那么这不是问题。

如何将chartjs作为es6模块导入？

1 个答案: