如何使用 Chart consoletvs/charts:7.* 解決 Laravel 8 中的錯誤“Uncaught SyntaxError: Cannot use import statement outside a module”？

Question

我已遵循 [https://chartisan.dev/documentationip top1] 中的所有步驟。 使用 CDN 鏈接一切正常，我可以加載任何圖表。

<script src="https://unpkg.com/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://unpkg.com/@chartisan/chartjs@^2.1.0/dist/chartisan_chartjs.umd.js"></script>

但我不會使用 CDN 鏈接，所以我刪除了上面的這兩行並安裝了前端適配器npm install chart.js@chartisan/chartjs以便能夠在沒有 CDN 的情況下使用圖表，這是我下面的代碼

 <div id="chart" style="height: 300px;"></div>

<script>
    import { Chartisan, ChartisanHooks } from '@chartisan/chartjs'//This is the problem
    const chart = new Chartisan({
          el: '#chart',
          url: "@chart('sample_chart')",
          hooks: new ChartisanHooks()
          .beginAtZero()
          .colors()
          .datasets('doughnut')
          });
  </script>

當我運行時出現此錯誤：

Uncaught SyntaxError: Cannot use import statement outside a module

Answer 1

您需要將它們導入app.js而不是視圖中。

Answer 2

您需要在 app.js 中執行以下操作

import {Chartisan, ChartisanHooks} from '@chartisan/chartjs';
window.Chartisan= Chartisan;
window.ChartisanHooks= ChartisanHooks;

然后在你的 .blade 文件中，你只需要像這樣直接使用 Chartisan 和 ChartisanHooks

<div id="chart" style="height: 300px;"></div>

<script>
       const chart = new Chartisan({
          el: '#chart',
          url: "@chart('sample_chart')",
          hooks: new ChartisanHooks()
          .beginAtZero()
          .colors()
          .datasets('doughnut')
          });
  </script>

確保在 .blade 文件中正確包含 app.js 文件。 它應該有效。