0
Je suis assez nouveau sur JQuery Mobile et j'ai passé des jours à trouver une question apparemment simple.Comment charger un graphique javascript sur la 2ème, 3ème, etc. page dans JQuery mobile?
Voici mon problème: J'utilise une bibliothèque javascript de cartographie d'Amcharts. Jusqu'à présent, tout va bien ... Ce que j'essaie maintenant, c'est juste de créer une simple page dans JQmobile avec 2 liens vers de nouvelles pages. Tout ce que je veux, c'est quand je clique sur le lien, l'amchart devrait afficher dans la div avec un nom spécifique. (Amcharts affiche généralement le graphique dans un certain div en appelant chart.write ('nameofthediv');
Donc, je pensais avec un gestionnaire d'événements lié à $ ('# container'). Bind ('clic', fonction() {...} Je devrais pouvoir simplement inclure le javascript pertinent ...
d'une certaine façon ... mais cela ne fonctionne pas
Voici le lien pour que vous puissiez voir ce que je veux dire.: http://www.noten-werkstatt.de/jqm_amcharts/
Et voici le code provenant de l'index.html et du custom-scripting.js pertinent
Merci beaucoup d'avance!
Cordialement, Lisa
index.html
<!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>
personnalisés-scripting.js
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);
}