如何在前端渲染 Apexchart（JS 库）？

Question

我想将 Apexcharts 库用于我的仪表板。现在我已经被他们文档中的一个非常简单的例子困住了（根据文档）。

我使用了他们的示例并尝试通过 ID 将其链接到我的画布容器，但是当我加载站点时它根本不显示。

我在 index.html 的最底部包含了 cdn 链接，并且我的控制台中没有任何错误。

根据开发人员工具，至少发生了一些事情：

这是我的JS：

      var options = {

        chart: {

          type: 'line'

        },

        series: [{

          name: 'sales',

          data: [30, 40, 35, 50, 49, 60, 70, 91, 125]

        }],

        xaxis: {

          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]

        }

      };

      var chart = new ApexCharts(document.querySelector("#myChart"), options);

      chart.render();

这是画布容器：

        <div class="column">

          <div class="wrapperDoughnut">

              <canvas width="220px" height="280px" id="myChart"></canvas>

          </div>

        </div>

Answer 1

那是运气......我得到了解决方案。似乎 Apexcharts 库在呈现需要预定义画布容器的 ChartJS 以外的图表时自己创建画布。所以我只是删除了画布容器并链接到父级。Apex 文档很差...尽管如此，我应该再次删除该线程吗？工作解决方案：HTML：&nbsp; &nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wrapperDoughnut" id="myChart">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>JS：&nbsp; &nbsp; &nbsp; var options = {&nbsp; &nbsp; &nbsp; &nbsp; chart: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'line'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; series: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'sales',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [30, 40, 35, 50, 49, 60, 70, 91, 125]&nbsp; &nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; &nbsp; xaxis: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; var chart = new ApexCharts(document.querySelector("#myChart"), options);&nbsp; &nbsp; &nbsp; chart.render();