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

我想将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>

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

          </div>
        </div>

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

这是画布容器：

      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>

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

          </div>
        </div>

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

---

很幸运……我找到了解决方案。在呈现图表时，Apexcharts库似乎自己创建了一个画布，而不是像ChartJS这样需要预定义画布容器的图表。因此，我只是删除了画布容器并链接到父级

Apex docu很差

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

工作解决方案：

HTML:

      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>

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

          </div>
        </div>

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