如何让 Apexchart（JS 库）在前端呈现？

Question

我想将 Apexcharts 库用于我的仪表板。现在我已经坚持使用他们文档中的一个非常简单的示例 (according docu).

我使用了他们的示例并尝试通过 ID link 它到我的 canvas 容器，但是当我加载网站时它根本不显示。

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

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

这是我的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();

这是 canvas 容器：

        <div class="column">
          <div class="wrapperDoughnut">
              <canvas width="220px" height="280px" id="myChart"></canvas>
          </div>
        </div>

Answer 1

真幸运...我得到了解决方案。似乎 Apexcharts 库在渲染图表时自己创建了一个 canvas，而不是例如需要预定义 canvas 容器的 ChartJS。所以我只是删除了 canvas 容器并链接到父容器。

Apex 文档很差...

然而，我是否应该再次删除此线程？

工作解决方案：

HTML:

        <div class="column">
          <div class="wrapperDoughnut" id="myChart">

          </div>
        </div>

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();

如何让 Apexchart（JS 库）在前端呈现？

How to make Apexchart (JS library) render at frontend?

javascript

apexcharts