Jquery mobile 如何在JQuery mobile的第2、3页等页面加载javascript图表？
我对JQuery Mobile还很陌生，我花了好几天的时间来解决一个显然很简单的问题 我的问题是： 我正在使用Amcharts中的一个图表javascript库。到目前为止，一切都很好。。。 我现在尝试的只是在JQmobile中创建一个简单的页面，比如说有两个指向新页面的链接。我只想在单击链接时，amchart应该在div中显示一个特定的名称。 （Amcharts通常通过调用chart.write（'nameofdiv'）在某个div中显示图表 因此我认为，如果将事件处理程序绑定到$（'#container'）.bind（'click'，function（）{…}），我应该能够只包含相关的javascript 但不知怎么的，它不起作用 以下是链接，您可以了解我的意思： 下面是index.html和相关custom-scripting.js中的代码 提前非常感谢 问候,， 丽莎 index.htmlJquery mobile 如何在JQuery mobile的第2、3页等页面加载javascript图表？,jquery-mobile,Jquery Mobile,我对JQuery Mobile还很陌生，我花了好几天的时间来解决一个显然很简单的问题 我的问题是： 我正在使用Amcharts中的一个图表javascript库。到目前为止，一切都很好。。。 我现在尝试的只是在JQmobile中创建一个简单的页面，比如说有两个指向新页面的链接。我只想在单击链接时，amchart应该在div中显示一个特定的名称。 （Amcharts通常通过调用chart.write（'nameofdiv'）在某个div中显示图表 因此我认为，如果将事件处理程序绑定到$（'#con
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile and Amcharts</title>
<link href="amcharts/style.css" rel="stylesheet" type="text/css"> <!-- Amcharts CSS-File local -->
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> <!-- JQ Mobile CSS-File (CDN) -->
<script src="amcharts/amcharts.js" type="text/javascript"></script> <!-- Amcharts JS-File local -->
<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script> <!-- JQ JS-File (CDN) -->
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script> <!-- JQ Mobile JS-File (CDN) -->
<script src="custom-scripting.js" type="text/javascript"></script> <!-- Custom Scripting JS-File local -->
</head>
<body>
<!-- ****** START PAGE ************ -->
<div data-role="page" id="page">
<div data-role="header">
<h1>Main Page</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2" class="page2">Page two</a></li>
<li><a href="#page3">Page three</a></li>
</ul>
</div>
<div id="chartserialdiv" style="height:500px !important; border: 1px solid;">It's odd...displaying the chart works here (div containr #chartserialdiv)...(Initialized in the window.onload = function() {})<br>But as I want to attach it to a click handler, please click "page two"...
</div><br>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<!-- ****** 2nd PAGE ************ -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page two</h1>
</div>
<div data-role="content" id="test"> <!-- ****** DIV CONTAINER "TEST" ************ -->
If the event handler worked, there must be text after the ":" :<br>
</div>
<div data-role="content" id="chartserialdiv2" style="height:500px !important; border: 1px solid;"> <!-- ****** DIV CONTAINER "CHARTSERIALDIV" ************ -->
The is the div container #chartserialdiv2 - Why is the chart not displaying here???
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<!-- ****** 3rd PAGE ************ -->
<div data-role="page" id="page3">
<div data-role="header">
<h1>Page three</h1>
</div>
<div data-role="content">
As there is no event handler attached to page 3, if you read the text and nothing else happens - that's correct! :-)
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
jquerymobile和Amcharts
主页
这很奇怪…在这里显示图表（div container#chartserialdiv）…（在window.onload=function（）{}中初始化）
但由于我想将其附加到单击处理程序，请单击“第二页”。。。
页脚
第二页
如果事件处理程序工作，则在“：”之后必须有文本
这是div容器#chartserialdiv2-为什么图表不显示在这里？？？
页脚
第三页
由于第3页没有附加事件处理程序，如果您阅读了文本，并且没有其他任何事情发生-这是正确的！：-）
页脚
window.onload = function() {
//This displays the chart on the start page
var chart;
var dataProvider;
createChart('chartserialdiv');
loadCSV("daten/budget_management_projekt_kum.csv"); //DATENQUELLE
//This is supposed to display the chart on the 2nd page when clicked on the link
$('#page li a.page2').bind('click', function(event){
alert("The link \"Page 2\" was clicked...now we turn to page 2 and try to load the chart...");
$('#test').append("Event Handler-Check: Congratulations, the event handler $(\'#test\').append... worked!!!<br>");
$('#chartserialdiv2').ready(function(){
var chart;
var dataProvider;
createChart('chartserialdiv2');
loadCSV("daten/budget_management_projekt_kum.csv"); //DATENQUELLE
});
//event.preventDefault();
//return false;
});
$(document).delegate('.ui-page', 'pageshow', function () {
alert("worked");
var chart;
var dataProvider;
createChart('chartserialdiv2');
loadCSV("daten/budget_management_projekt_kum.csv"); //DATENQUELLE
});
}
// method which loads external data
function loadCSV(file) {
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
}
else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load
request.open('GET', file, false);
request.send();
parseCSV(request.responseText);
}
// method which parses csv data
function parseCSV(data){
data = data.replace (/,/g,"."); // SUCHE NACH KOMMA UND ERSETZE DURCH PUNKT
var rows = data.split("\r"); // SUCHE NACH ZEILENUMBRUCH UND SPALTE DORT ZEILE AB
dataProvider = [];
for (var i = 1; i < rows.length; i++){ // i=1 WEGEN DER ÜBERSCHRIFTEN
if (rows[i]) {
var column = rows[i].split(";");
var category = column[0];
var value1 = column[1];
var value2 = column[2];
var value3 = column[3];
var dataObject = {category:category, value1:value1, value2:value2, value3:value3};
dataProvider.push(dataObject);
}
}
chart.dataProvider = dataProvider;
chart.validateData();
}
function createChart(container){ // method which creates chart
chart = new AmCharts.AmSerialChart(); // chart variable is declared in the top
chart.addTitle('Chart',12, '#FFFFFF', 1, true);
chart.addLabel(15, 25, 'Mio. €', 'left', 10, '#000000', 0, 1, true);
chart.backgroundAlpha = 1;
chart.backgroundColor = '#FFFFFF';
chart.categoryField = "category"; // here we tell the chart name of category field in our data provider. Wwe called it "date" (look at parseCSV method)
var graph = new AmCharts.AmGraph(); // chart must have at least 1 graph
graph.valueField = "value1"; // graph should know at what field from data provider it should get values.
graph.lineThickness = 3;
graph.lineColor = "#336699";
graph.type = "column";
graph.bulletAlpha = 1;
graph.balloonText = "PLAN kum.:[[value]] Mio. €";
graph.title = "PLAN kum.";
graph.fillAlphas = 1;
chart.addGraph(graph); // add graph to the chart
var graph2 = new AmCharts.AmGraph();
graph2.valueField = "value2"
graph2.lineThickness = 3;
graph2.bullet = "bubble";
graph2.balloonText = "IST kum.:[[value]] Mio. €";
graph2.title = "IST kum.";
graph2.lineColor = "#ff9933";
chart.addGraph(graph2);
var graph3 = new AmCharts.AmGraph();
graph3.valueField = "value3";
graph3.lineThickness = 5;
graph3.bulletAlpha = 1;
graph3.lineColor = "#999999";
graph3.type = "column";
graph3.fillAlphas = 1;
graph3.dashLength = 5;
graph3.balloonText = "Forecast kum.:[[value]] Mio. €";
graph3.title = "Forecast kum.";
chart.addGraph(graph3);
var legend = new AmCharts.AmLegend();
chart.addLegend(legend);
legend.align = "center";
legend.backgroundAlpha = 1;
legend.backgroundColor ="#CCCCCC";
legend.borderAlpha = 1;
legend.borderColor = "#000000";
legend.equalWidths =true;
legend.horizontalGap = 1;
legend.switchType = "v";
legend.markerBorderAlpha = 1;
legend.markerBorderThickness = 1;
legend.markerBorderColor = "#FFFFFF";
legend.markerLabelGap = 5;
legend.position = "bottom";
// 'chartserialdiv' is id of a container where the chart will be
chart.write(container);
}
window.onload=function（）{
//这将在起始页上显示图表
var图；
var数据提供者；
createChart（'chartserialdiv'）；
loadCSV（“daten/budget_management_projekt_kum.csv”）；//DATENQUELLE
//当点击链接时，应该在第二页显示图表
$（'a.page2'）.bind（'click'，函数（事件）{
警报（“点击了链接“第2页”…现在我们转到第2页并尝试加载图表…”）；
$（'\'test'）.append（“事件处理程序检查：祝贺您，事件处理程序$（\'\'test\）。append…成功！！！
”；
$（'#chartserialdiv2'）.ready（function（）{
var图；
var数据提供者；
createChart（'chartserialdiv2'）；
loadCSV（“daten/budget_management_projekt_kum.csv”）；//DATENQUELLE
});
//event.preventDefault（）；
//返回false；
});
$（文档）.delegate（'.ui页面'，'pageshow'，函数（）{
警惕（“已工作”）；
var图；
var数据提供者；
createChart（'chartserialdiv2'）；
loadCSV（“daten/budget_management_projekt_kum.csv”）；//DATENQUELLE
});
}
//加载外部数据的方法
函数loadCSV（文件）{
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari
var request=new XMLHttpRequest（）；
}
否则{
//IE6、IE5的代码
var request=newactivexobject（'Microsoft.XMLHTTP'）；
}
//装载
打开（'GET'，file，false）；
request.send（）；
parseCSV（request.responseText）；
}
//解析csv数据的方法
函数parseCSV（数据）{
data=data.replace（/，/g，“.”；//例如
var rows=data.split（“\r”）；//例如NACH ZEILENUMBRUCH和SPALTE DORT ZEILE AB
数据提供者=[]；
对于（var i=1；i$(document).delegate('#page2', 'pageshow', function( ) {
createChart('chartserialdiv2');
loadCSV("daten/budget_management_projekt_kum.csv");
});