Question

我使用高图表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>

这是我的身体内容......

 <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更改为更独特的东西。

Answer 2

你需要在AJAX中初始化图表，在单独的$（函数）... Morever $（函数与$（document）.ready（）相同。因此请检查这是否有效：

    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);   
$('#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 }
        });    
            }      
        });
    });

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

2 个答案: