javascript - 使用插件动态导入 chart.js

Question

如果需要，我们可以从 skypack 动态导入 chart.js。

const mod = await import("https://cdn.skypack.dev/chart.js");

mod.Chart.register(...mod.registerables);

但是我们无法注册动态加载的插件。

我们能够使用插件的唯一方法是从脚本标签加载它们。

我们创建了一个 codepen 来玩转动态加载或通过脚本标签加载的 chartjs 模块。

https://codepen.io/dbauszus-glx/pen/NWgQNjj

如果加载到全局窗口对象，这将起作用。

  var myChart = new window.Chart(
    document.getElementById("chart").getContext("2d"),
    {
      responsive: true,
      type: dataview.chart.type || "bar",
      plugins: [ChartDataLabels],

如果 datalabel 插件作为模块加载，这将不起作用。

如果插件从图表配置中注释掉，图表就可以工作。

  const mod = await import("https://cdn.skypack.dev/chart.js");

  mod.Chart.register(...mod.registerables);

  const plugin = await import('https://cdn.skypack.dev/chartjs-plugin-datalabels')

  var myChart = new mod.Chart(
    document.getElementById("chart").getContext("2d"),
    {
      responsive: true,
      type: dataview.chart.type || "bar",
      plugins: [plugin.default],

标签： javascriptpluginsmodulechart.jsdynamic-import