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

退格键

我有几个用于基于代理的建模的存储库,并且想使用绘图/绘图库来查看他们创建的数据。

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

鉴于极简环境:

* How to I import chart.js? I'm currently using their CDN
* If that is impossible, what other charting library *is* importable?
科雷西奥

我对整个JS模块非常陌生,但是有完全相同的问题。我使用以下代码使其工作:

<!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>

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

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

但这不是问题,如果您不使用TypeScript并且上面的JS代码可在浏览器中使用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章