0

我为移动应用程序创建了一个 Highchart，但是当我测试图表时，它没有出现。我已经在 Firefox 和 Safari 上进行了测试，并且图表仅在我刷新页面后才会出现。

这是我的代码。

主页

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link rel="stylesheet" href="css/jquery.mobile.structure-1.1.1.min.css" />
    <link rel="stylesheet" href="css/themes/theme.css" />
    <link rel="stylesheet" href="css/app.css" />
</head>
<body>
    <div data-role="page" id="pgIndex">
        <div data-role="header">
            <div align="center">
            <h1 class="ui-bar" id="gradheader"><i>UBA<sup style="font-size: 8pt;">&reg;</sup></i> Health Plan</h1>
            </div>
        </div>
        <div data-role="content" class="content">
            <div class="content-primary">
                <ul data-role="listview" data-theme="a">
                    <li>
                        <a href="pre-results.html"><img src="Icons/globe_64_white.png" style="padding:10px 0 10px 20px;"/>
                        <h3>View the National Average</h3></a>
                    </li>
                </ul><br>
                <div data-role="fieldcontain">
                <ul data-role="listview" data-theme="a" data-inset="true">
                    <li data-role="list-divider">
                        <h3>Register to Activate These Options</h3>
                    </li>
                    <li>
                        <img src="Icons/pencil_64_white.png" style="padding:10px 0 10px 10px;"/>
                        <h3>Pick your Plan Type</h3>
                        <ul>
                            <li><a href="pre-results.html"><div id="PPO">PPO</div></a></li>
                            <li><a href="pre-results.html"><div id="HMO">HMO</div></a></li>
                            <li><a href="pre-results.html"><div id="POS">POS</div></a></li>
                            <li><a href="pre-results.html"><div id="CDHP">CDHP</div></a></li>
                            <li data-icon="back" data-iconpos="left"><a href="index.html"><div>Back</div></a></li>
                        </ul>
                    </li>
                    <li>
                        <img src="Icons/spanner_64_white.png" style="padding:10px 0 10px 10px;"/>
                        <h3>Pick your Industry</h3>
                        <ul style="height:auto;">
                            <li><a href="pre-results.html"><div id="Manufacturing">Manufacturing</div></a></li>
                            <li><a href="pre-results.html"><div id="Retail">Wholesale/Retail</div></a></li>
                            <li><a href="pre-results.html"><div id="Scientific">Prof./Scientific/Tech. Svcs.</div></a></li>
                            <li><a href="pre-results.html"><div id="HealthCare">Health Care/Social Assist.</div></a></li>
                            <li><a href="pre-results.html"><div id="Finance">Finance/Insurance/Real Estate</div></a></li>
                            <li><a href="pre-results.html"><div id="Government">Gov't./Education/Util.</div></a></li>
                            <li><a href="pre-results.html"><div id="Information">Information/Arts/Accom. &amp; Food</div></a></li>
                            <li><a href="pre-results.html"><div id="Construction">Construction/Agri./Mining/Trans.</div></a></li>
                            <li><a href="pre-results.html"><div id="Other">All Other Services</div></a></li>
                            <li data-icon="back" data-iconpos="left"><a href="index.html"><div>Back</div></a></li>
                        </ul>
                    </li>
                    <li class="ui-disabled">
                        <img src="Icons/man_64_white.png" style="padding:10px 0 10px 10px;"/>
                        <h3>Pick your Company Size</h3>
                        <ul>
                            <li><a href="pre-results.html"><div id="Under25">Under 25</div></a></li>
                            <li><a href="pre-results.html"><div id="25-49">25-49</div></a></li>
                            <li><a href="pre-results.html"><div id="50-99">50-99</div></a></li>
                            <li><a href="pre-results.html"><div id="100-199">100-199</div></a></li>
                            <li><a href="pre-results.html"><div id="200-499">200-499</div></a></li>
                            <li><a href="pre-results.html"><div id="500-999">500-999</div></a></li>
                            <li><a href="pre-results.html"><div id="1000+">1000+</div></a></li>
                            <li data-icon="back" data-iconpos="left"><a href="index.html"><div>Back</div></a></li>
                        </ul>
                    </li>
                </ul>
                </div>
            </div>
       </div>
       <br><br><br><br><br><br><br><br><br><br>
   </div>
    <div data-role="footer" data-position="fixed" id="menu">
        <div data-role="navbar" style="width:103%; position:absolute; right:10px;">
            <div class="ui-grid-b">
                <div class="ui-block-a">
                    <a href="index.html" data-theme="a">
                    <div class="ui-bar ui-bar-a">
                        <img src="Icons/home_64.png" height="32" width="32"/><br>
                        Home
                    </div>
                    </a>
                </div>
                <div class="ui-block-b">
                    <a href="register.html">
                    <div class="ui-bar ui-bar-a">
                        <img src="Icons/info_64.png" height="32" width="32"/><br>
                        Register
                    </div>
                    </a>
                </div>
                <div class="ui-block-c">
                    <a href="#">
                    <div class="ui-bar ui-bar-a">
                        <img src="Icons/magnifier_64.png" height="32" width="32"/><br>
                        Find Member
                    </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.8.0.min.js"></script>
    <script src="js/jquery.mobile-1.2.0.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/app.js"></script>
    <script src="js/jquery.validate.min.js"></script>
</body>

这是图表应该出现的内页，无需刷新页面。

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link rel="stylesheet" href="css/jquery.mobile.structure-1.1.1.min.css" />
    <link rel="stylesheet" href="css/themes/theme.min.css" />
    <link rel="stylesheet" href="css/app.css" />
</head>
<body>
    <div data-role="page" id="pgIndex">
        <div data-role="header">
        <div align="center">
            <h1 class="ui-bar" id="gradheader"><i>UBA<sup style="font-size: 8pt;">&reg;</sup></i> Health Plan</h1>
        </div>
        </div>
        <div data-role="content" style="padding: 10px;">
            <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
        </div>
    </div>
    <div data-role="footer" data-position="fixed" id="menu">
        <div data-role="navbar" style="width:103%; position:absolute; right:10px;">
            <div class="ui-grid-b">
                <div class="ui-block-a">
                    <a href="index.html" data-theme="a">
                    <div class="ui-bar ui-bar-a">
                        <img src="Icons/home_64.png" height="32" width="32"/><br>
                        Home
                    </div>
                    </a>
                </div>
                <div class="ui-block-b">
                    <a href="register.html">
                    <div class="ui-bar ui-bar-a">
                        <img src="Icons/info_64.png" height="32" width="32"/><br>
                        Register
                    </div>
                    </a>
                </div>
                <div class="ui-block-c">
                    <a href="#">
                    <div class="ui-bar ui-bar-a">
                        <img src="Icons/magnifier_64.png" height="32" width="32"/><br>
                        Find Member
                    </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.8.0.min.js"></script>
    <script src="js/jquery.mobile-1.2.1.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/app.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/highcharts.js"></script>
    <script src="js/exporting.js"></script>
    <script src="js/nationalchart.js"></script>
</body>

这是我的 JS。

$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                'PPO',
                'HMO',
                'POS',
                'HPMO' 
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Premium Dollars Spent / Year'
            }
        },
        legend: {
            layout: 'horizontal',
            backgroundColor: '#FFFFFF',
            align: 'left',
            verticalAlign: 'top',
            x: 100,
            y: 40,
            floating: true,
            shadow: true
        },
        tooltip: {
            formatter: function() {
                return ''+
                    this.x +': '+ this.y +' mm';
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
            series: [{
            name: 'National',
            data: [49.9, 71.5, 106.4, 129.2],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                x: 4,
                y: 10,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }, {
            name: 'Regional (Available after Registering)',
            data: [83.6, 78.8, 98.5, 93.4],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                x: 4,
                y: 10,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }             
        }]
    });
});
});

我正在使用 Firebug 1.10.4 来检查错误，但没有。

4

1 回答 1

0

You need to initialise your chart inside jQuery mobile's pagecreate event

http://jquerymobile.com/test/docs/api/events.html

于 2012-12-17T15:36:02.720 回答