javascript - Ajax 重新加载 Bootstrap 选项卡中的内容

Question

问题似乎出在几个地方。为了开始我的图表，我试图在第三个选项卡中显示不会显示与 div 相关的 JavaScript。我相信这是因为它们在 HTML 类中设置为非事件状态，然后不会加载图表 <div>显示图表。
我不确定解决这个问题的方法，我研究过 DOM 事件和 Ajax 加载函数。但我不确定这是否真的是正确的答案。

我尝试解决此问题的方法是使选项卡处于事件状态，这是有效的。但假设将来我想要所有三个选项卡上的图表，它仍然只加载事件选项卡。另外，我尝试将顶点图表 JS 代码放入我的点击函数中，这也有效。但如果您按照 1 -> 2 -> 3 的顺序单击选项卡，您将加载 3 个图表。

所有这些都是使用 Apex 图表、Bootstrap、PHP 和 JS。

<!-- Nav tabs -->
<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#menu1">Menu 1</a></li>
    <li class="nav-item"><a class="nav-link" href="#menu2">Menu 2</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
        <h3>HOME</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
        <div class="row">
            <div class="col-lg-6">
                <h3>Income categories</h3>
                <div id="chart"></div>
            </div>
            <div class="col-lg-6">
                <h3>Expense categories</h3>
                <div id="chart2"></div>
            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function(){
  $(".nav-tabs a").click(function(){
    $(this).tab('show');
  });
});
</script>
</body>
</html>
<!--Loads in the bar chart for analytics-->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<?php include($_SERVER['DOCUMENT_ROOT'] . "/Management/scripts/incomegraph.php"); ?>

这是 Apex 图表

var options = {
    chart: {
        height: 350,
        type: 'bar',
    },
    plotOptions: {
        bar: {
            horizontal: true,
        }
    },
    dataLabels: {
        enabled: true
    },
    series: [{
        data: [
            400,
            430,
            448,
            470,
            540]
    }],
    xaxis: {
        categories: [
            'Management Income',
            'Late Fee Income',
            'Application Fee Income',
            'Convience Fees',
            'Laundry',],
    }
}
var chart = new ApexCharts(document.querySelector("#chart"),options);

chart.render();

var options = {
    chart: {
        height: 350,
        type: 'bar',
    },
    plotOptions: {
        bar: {
            horizontal: true,
        }
    },
    dataLabels: {
        enabled: true
    },
    series: [{
        data: [400, 430, 448, 470, 540]
    }],
    xaxis: {
        categories: [
            'Legal fees',
            'Utilities',
            'Cleaning and Maintenance',
            'Wages and Salaries',
            'Repairs',],
    }
}
var chart = new ApexCharts(document.querySelector("#chart2"),options);

chart.render();

我收到的唯一错误消息如下:

TypeError: Cannot read property 'forEach' of undefined
    at i.value (apexcharts:6)
    at i.value (apexcharts:6)
    at apexcharts:6
    at it (apexcharts:6)
    at new $ (apexcharts:6)
    at i.value (apexcharts:6)
    at apexcharts:6

我查看了该帖子寻求帮助，但没有人给出足够的答案 Bootstrap load AJAX content in Inactive Tab Reloading Content of Ajax Tab bootstrap popover: reload content with ajax

Answer 1

这是 ApexCharts 中的一个错误，最近已修复并在 v3.7.1 中发布请将 ApexCharts 更新到 3.7.1，希望问题能够自行解决。