通过CDN引入Apex Charts的HTML页面图表无法显示问题

错误原因 #

你的代码核心问题是使用了错误的渲染容器：

• ApexCharts 默认采用SVG技术渲染图表，不支持<canvas>标签作为挂载节点，这是它和Chart.js的核心差异之一。
• 你只需要将原代码里的<canvas id="chart"></canvas>替换为普通的<div>标签即可正常渲染。

修复后完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-10">
            <!-- 把canvas替换为div，手动加宽高可避免父样式影响 -->
            <div id="chart" style="width: 100%; height: 350px;"></div>
        </div>
    </div>
</div>

<script>
    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("#chart"), options);
    chart.render();
</script>

</body>
</html>

可选排查项 #

如果替换标签后仍无法正常显示，可检查当前页面是否正确加载了Bootstrap栅格样式，避免col-md-10类对应的宽度规则失效导致图表容器尺寸为0。

内容的提问来源于stack exchange，提问作者cryptomatcat