Question

我有以下问题，我在Visual Studio 2013中创建了一个应用程序，并且已经使用了Bootstrap 3，我有一个带有库的母版页，我有以下页面加载内容页。

我试图在3个标签中显示图形，但只显示活动面板的图形而不加载其他图形。

不知道还能做什么，我知道问题与Bootstrap有关，无法找到如何修复它的文档。如果您使用Morris.js可以使用Redraw功能，但我使用的是DevExpress Charts

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <script src="Scripts/js/knockout-3.0.0.js"></script>
    <script src="Scripts/js/globalize.min.js"></script>
    <script src="Scripts/js/dx.chartjs.js"></script>
    <div class="container">
        <div class="row">
            <div class="col-md-5">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Tab Panel<span class="badge pull-right">Area 500</span></h3>
                    </div>
                    <div class="panel-body">
                        <script type="text/javascript">
                            $(function () {
                                var dataSource = [
                                                    { country: "Russia", area: 12 },
                                                    { country: "Canada", area: 7 },
                                                    { country: "USA", area: 7 },
                                                    { country: "China", area: 7 },
                                                    { country: "Brazil", area: 6 },
                                                    { country: "Others", area: 55 }
                                ];

                                $("#chartTab1").dxPieChart({
                                    dataSource: dataSource,
                                    series: [
                                        {
                                            argumentField: "country",
                                            valueField: "area",
                                            label: {
                                                visible: true,
                                                connector: {
                                                    visible: true,
                                                    width: 1
                                                }
                                            }
                                        }
                                    ],
                                    title: "Area of Countries"
                                });
                            })
                        </script>
                        <script type="text/javascript">
                            $(function () {
                                var dataSource = [
                                                    { country: "Russia", area: 12 },
                                                    { country: "Canada", area: 7 },
                                                    { country: "USA", area: 7 },
                                                    { country: "China", area: 7 },
                                                    { country: "Brazil", area: 6 },
                                                    { country: "Others", area: 55 }
                                ];

                                $("#chartTab2").dxPieChart({
                                    dataSource: dataSource,
                                    series: [
                                        {
                                            argumentField: "country",
                                            valueField: "area",
                                            label: {
                                                visible: true,
                                                connector: {
                                                    visible: true,
                                                    width: 1
                                                }
                                            }
                                        }
                                    ],
                                    title: "Area of Countries"
                                });
                            })
                        </script>
                        <script type="text/javascript">
                            $(function () {
                                var dataSource = [
                                                    { country: "Russia", area: 12 },
                                                    { country: "Canada", area: 7 },
                                                    { country: "USA", area: 7 },
                                                    { country: "China", area: 7 },
                                                    { country: "Brazil", area: 6 },
                                                    { country: "Others", area: 55 }
                                ];

                                $("#chartTab3").dxPieChart({
                                    dataSource: dataSource,
                                    series: [
                                        {
                                            argumentField: "country",
                                            valueField: "area",
                                            label: {
                                                visible: true,
                                                connector: {
                                                    visible: true,
                                                    width: 1
                                                }
                                            }
                                        }
                                    ],
                                    title: "Area of Countries"
                                });
                            })
                        </script>

                        <ul class="nav nav-tabs" id="myTab">
                            <li class="active"><a href="#Tab1" data-toggle="tab">Tab1</a></li>
                            <li><a href="#Tab2" data-toggle="tab">Tab2</a></li>
                            <li><a href="#Tab3" data-toggle="tab">Tab3</a></li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="Tab1">
                                <div id="chartTab1"></div>
                            </div>
                            <div class="tab-pane" id="Tab2">
                                <div id="chartTab2"></div>
                            </div>
                            <div class="tab-pane" id="Tab3">
                                <div id="chartTab3"></div>
                            </div>
                        </div>

                        <script>
                            $('#myTab a').click(function (e) {
                                e.preventDefault();
                                $(this).tab('show');
                            })
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

Answer 1

您在代码中使用了data-api和programmatic api。从您的代码中删除此脚本

<script>
$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})
</script>

你的html中的data-toggle会照看你的标签。

Bootstrap选项卡未加载内容

1 个答案: