0
모바일 앱용 하이 차트를 만들었지 만 차트를 테스트 할 때 하이 차트가 생성되지 않습니다. Firefox 및 Safari에서 테스트를 마쳤으며 차트를 새로 고친 후에 만 차트가 나타납니다.jQuery Mobile 1.2를 사용하여 하이 차트를 전혀 표시하지 않음
여기 내 코드입니다.
여기에 홈 페이지
<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>
$(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'
}
}
}]
});
});
});
오류를 확인하기 위해 방화광 차단제 1.10.4를 사용하고 있습니다.