Javascript Ajax在引导选项卡中重新加载内容

Javascript Ajax在引导选项卡中重新加载内容,javascript,php,jquery,html,apexcharts,Javascript,Php,Jquery,Html,Apexcharts,问题似乎出在几个地方。为了开始我的图表,我试图在第三个选项卡中显示的图表不会显示绑定到div的JavaScript。我相信这是因为它们在HTML类中被设置为非活动,然后HTML类不会加载图表来显示图表。 我不确定解决这个问题的方法,我已经研究了DOM事件和Ajax加载函数。但我不确定这是否是正确答案 我试图解决这个问题的方法是使选项卡处于活动状态。但是,如果将来我想在所有三个选项卡上显示图形,它仍然只加载活动选项卡。此外,我还尝试将apex charts graph JS代码放在我的click函

问题似乎出在几个地方。为了开始我的图表,我试图在第三个选项卡中显示的图表不会显示绑定到div的JavaScript。我相信这是因为它们在HTML类中被设置为非活动,然后HTML类不会加载图表来显示图表。
我不确定解决这个问题的方法,我已经研究了DOM事件和Ajax加载函数。但我不确定这是否是正确答案

我试图解决这个问题的方法是使选项卡处于活动状态。但是,如果将来我想在所有三个选项卡上显示图形,它仍然只加载活动选项卡。此外,我还尝试将apex charts graph JS代码放在我的click函数中,它也可以工作。但是,如果您按1->2->3的顺序单击选项卡,您将加载3个图表

所有这些都使用Apex图表、引导、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"); ?>
我得到的唯一错误消息如下:

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
我看过这篇文章寻求帮助,但没有一篇得到充分的答案

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

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

您是最棒的!谢谢你,我正在努力解决这个问题!我浪费了两天,但你是一个了不起的人!很抱歉给您带来不便。该库非常新,需要进行更多测试以避免此类问题。谢谢你的夸奖!哦,不用担心,仍然是最好的图表库,我想提交一些代码更改来帮助您。我有一个很酷的想法,那就是用条形图将总数加载到图表的右侧,而不是图表上。我会试着让我的工作,然后把它寄给你,也许作为一个例子。代码真的很好,继续努力!!!你是最棒的!谢谢你,我正在努力解决这个问题!我浪费了两天,但你是一个了不起的人!很抱歉给您带来不便。该库非常新,需要进行更多测试以避免此类问题。谢谢你的夸奖!哦,不用担心,仍然是最好的图表库,我想提交一些代码更改来帮助您。我有一个很酷的想法,那就是用条形图将总数加载到图表的右侧,而不是图表上。我会试着让我的工作,然后把它寄给你,也许作为一个例子。代码真的很好,继续努力!!!
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