1
jQuery Mobile 애플리케이션에서 작업 중이며 Google Charts를 구현하려고합니다. 현재 접근 방식으로 차트를 표시 할 수 없습니다. 모든 코드를 머리에 넣으면 잘로드되지만, main.js 파일로 옮기면 나타나지 않습니다.jQuery Mobile을 사용하여 Google 차트로드
<!DOCTYPE html>
<html>
<head>
<title>Manufacturing Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/grey-orange.min.css" />
<link rel="stylesheet" href="./css/jquery.mobile.custom.structure.min" />
<link rel="stylesheet" href="./fonts/font-awesome/css/font-awesome.min.css"/>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile.custom.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
</script>
</head>
<body>
<div data-role="page" data-theme="a" id="main-project-page">
<div data-role="panel" class="project-menu" data-position="left" data-theme="c">
</div><!-- /panel -->
<div data-role="header" data-position="fixed">
</div><!-- /header -->
<div data-role="content">
<h3 id="project-name"></h3>
<div id="project-overall-chart"></div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
</div><!-- /footer -->
</div><!-- /page -->
<script src="./js/main.js"></script>
</body>
</html>
내가 데이터베이스에서 프로젝트에 대해 나에게 몇 가지 정보를 전송하기 위해 API를 호출하고, 그 정보를 내 차트를 만들 :
기본 HTML 페이지 내가 사용하고 있습니다. 그러나 지금 당장 Google API 문서의 예를 사용하여 이해하고 있는지 확인합니다. 이것은 내가 아직도 그 모두에 대한 더 나은 이해를 얻기 위해 노력하고,
//Global thingz
var request;
var project_id = "null";
var equipment_id = "null";
//Main Project Page
$(document).on("pageinit", "#main-project-page", function() {
//Menu Panel slide effect
$('.menu-button').click(function(event) {
$('.project-menu').panel("open");
});
//Populate project page with current project...
populate_project_view();
});
function populate_project_view()
{
//If there is a project to get
if (project_id != 'null')
{
//Construct the JSON
var json = new Object();
var info = new Object();
json.type = "info";
info.type = "project";
info.id = project_id;
json.info = info;
json = JSON.stringify(json);
//Make-a the request-a
request = getHTTPObject();
request.onreadystatechange = function() {
//If request object received response
if (request.readyState == 4)
{
var json = JSON.parse(request.responseText);
if (json.error == true)
{
alert('Error: ' + json.msg);
//Revert back to main screen
$.mobile.changePage('#main-page', 'slide', true, true);
}
else
{
//Populate the #main-project-page DOM with project object
var project = json.project;
//Populate Project's name
var name = document.createTextNode(project.name);
$('#project-name').append(name);
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('project-overall-chart'));
chart.draw(data, options);
}
}
}
}
request.open("GET", "./php/api.php?package=" + json + '&qs=' + new Date().getTime(), true);
request.send(null);
}
}
/*
Support functions
*/
//Returns an HTTPObject
function getHTTPObject()
{
var xhr = false;
if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try
{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xhr = false;
}
}
}
return xhr;
}
나는 매우 자바 스크립트의 AJAX 작업 경험이 아니에요 그리고 아직 브라우저에서 전체 활동의 ... 호출하려고하는 방법이다. 이 문제에 대한 도움에 미리 감사드립니다!
나단