jquery - div 标签在与 HTML 中的菜单栏集成时不可见

Question

我使用 high chart jquery 库制作了一个图表。当我的图表仅在 jsp 页面中时，它是可见的，但是当我尝试将它与我的菜单栏页面集成时，它不显示图表。我我没有得到我错的地方......

我试图在 Firebug 中查看错误，一切正常，因为数据来自服务器端代码。

这是我的jsp页面的头部内容..

 <script type="text/javascript">

    var dbdata="";
    var fancy_array = [];

    $(document).ready(function() {

        $.ajax({
            type: 'GET',
            url: 'getPieChartcallcountbysite',
            async:false,
            dataType: "text",
            success: function(data) {
                dbdata=JSON.parse(data);
                var i;  
                for(i = 0; i < dbdata.length;i=i+2)
                {
                    var item = [dbdata[i], dbdata[i+1]];
                    fancy_array.push(item);
                }
                console.log(fancy_array);       
            }      
        });
    });

    $(function () {
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Graphical Analysis of CallBilling, 2013'
            },
            tooltip: {
                pointFormat: "CallCount {point.y:.0f}"
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            series: [{
                    type: 'pie',
                    name: 'Call Type',
                    data:fancy_array

                }],
            credits: {
                enabled: false
            },
            exporting: { enabled: false }
        });
    });

</script>

这是我的 body 内容......

 <div id="menu">
    <ul class="menu">

        <li><a href="Home.aspx" class="parent"><span>Home</span></a>

        </li>
        <li><a href="#" class="parent"><span>Reports</span></a>
            <div><ul>

                    <li><a href="#" class="parent"><span>Details</span></a>
                        <div><ul>
                                <li><a href="daterange.jsp" >Generic Detail Report</a></li>
                                <li><a href="Extension.jsp">ExtensionWise Report</a></li>
                                <li><a href="Trunk.jsp">TrunkWise Report</a></li>
                                <li><a href="Department.jsp">DepartmentWise Report</a></li>
                                <li><a href="WWIDwise.jsp">WWIDwise Report</a></li>
                                <li><a href="site.jsp">Sitewise Report</a></li>
                                <li><a href="ServiceProvider.jsp">ServiceProviderwise Report</a></li>
                                <li><a href="TOPNUSER.jsp">Top N User Report</a></li>
                                <li><a href="DetailCountry.jsp">Countrywise Report</a></li>
                            </ul></div>
                    </li>
                </ul>
        </li>
    </ul>
</div>

<br/>
<div id="container" style="width:550px; height: 200px; margin:0 auto"></div>

请帮我找出问题所在..我完全被这种情况震惊了..提前致谢...

Answer 1

如果它只在没有 <div id="menu"> ... </div> 的情况下工作阻止我认为 id 存在冲突，方法是将#menu 更改为更独特的内容。