我为移动应用创建了一个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;">®</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. & 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;">®</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检查错误，但没有。
答案 0 :(得分：0)
您需要在jQuery mobile pagecreate事件
中初始化您的图表