Boostrap活动项目无法正常工作

Question

我正在尝试创建一个标签窗格卡，在其中可以选择查看两个不同的图形：revenue-chart和sales-chart。 但是我对active功能有疑问。如果我按照以下方式设置代码：

<ul class="nav nav-pills ml-auto">
        <li class="nav-item">
            <a class="nav-link active" href="#revenue-chart" data-toggle="tab">Storico</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#sales-chart" data-toggle="tab">Budget</a>
        </li>
    </ul>
    </div>
    </div><!-- /.card-header -->
    <div class="card-body">
        <div class="tab-content p-0">
            <!-- Morris chart - Sales -->
            <div class="chart tab-pane active" id="revenue-chart"
            style="position: relative; height: 300px;">
            <canvas class=" w-100 " id="revenue-chart-canvas"  height="300" style="height: 300px;"></canvas>
        </div>
        <div class="chart tab-pane " id="sales-chart"
        style="position: relative; height: 300px;">
        <canvas class=" w-100 " id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
    </div>

它只显示第一张图。而且，如果我尝试选择第二张图，则不会出现。如何解决我的问题？