Bonjour 
Je me demandais s’il est possible d’implémenter des boucles Spip dans du code JavaScript?
Merci
Oui, si ton script est généré par un squelette, exemple javascript/gis.js.html · master · spip-contrib-extensions / gis · GitLab
1 « J'aime »
Il y a 2 solutions selon ton besoin :
1 « J'aime »
Merci @b_b et @jeanmarie pour les liens. J’ai vu « gis.js.html » et « #PRODUIRE », mais je ne sais pas exactement comment utiliser ces techniques.
Voici un exemple de Google Charts où j’ai essayé d’implémenter mes boucles Spip :
<script type="text/javascript">
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Sections', 'Articles'],
<BOUCLE_rb1(RUBRIQUES){id_rubrique=1}>
<B_articles>
['#TITRE', #GRAND_TOTAL]<BOUCLE_articles(ARTICLES) {id_rubrique}> </BOUCLE_articles></B_articles></BOUCLE_rb1>,,
['Titre', 2],
['Titre', 2],
['Titre', 2],
['Titre', 7],
]);
var options = {
title: '',
};
var chart = new google.visualization.PieChart(
document.getElementById('piechart'),
);
chart.draw(data, options);
}
</script>
J’ai essayé d’insérer directement la boucle de comptage du nombre d’articles dans une section pour afficher le résultat sous forme de graphique circulaire, mais le code JS ne fonctionne plus et affiche un message d’erreur.
Les symboles de boucle et les balises comme < > { } [ ] interfèrent avec le code JS. Quelle est la bonne méthode ?
Merci beaucoup.
Est-ce que tu as un erreur dans la console de ton navigateur ?
A y regarder (très très) rapidement, on dirait qu’il manque une virgule dans la boucle après ['#TITRE', #GRAND_TOTAL] et qu’il y en a 2 en trop en fin de ligne après </BOUCLE_rb1>.
Aussi, tu peux simplifier en supprimant la boucle <BOUCLE_rb1> et en ajoutant {id_rubrique=1} dans <BOUCLE_articles...>. Et tu dois pouvoir supprimer la fermeture </B_articles> aussi, car tu n’affiched rien après ta boucle.
1 « J'aime »
Bonjour,
Ya des plugins qui poposse des graphe comme ça déjà non ?
1 « J'aime »
@jeanmarie Quelle que soit la boucle insérée dans n’importe quel code JS, elle ne fonctionne pas.
Par exemple, si j’insère:
BOUCLE_a(RUBRIQUES){id_rubrique=1}>#TITRE</BOUCLE_a>
ou toute autre boucle Spip, le JS cesse de fonctionner.
@pierretux Oui, il existe un plugin pour cela, comme Chart.js, mais le problème reste le même : comment implémenter des boucles Spip dans ses modèles aussi.
Tu as déjà des modeles :
<chart
|id=camembert1
|canvaswidth=250
|canvasheight=250
|type=pie
|labels=Tôkyô,Kyoto,Osaka,Chiba,Hiroshima
|data=10,32,50,25,5>
1 « J'aime »
@pierretux Bien sûr, il y a des modèles, comme je l’ai mentionné dans ma réponse précédente, mais le problème persiste : l’insertion de boucles dans le code ne fonctionne pas. C’est le même problème qu’avec n’importe quelle boucle dans du code JavaScript.
Ok mais faut boucler hors JS
#SET{data_departement, #ARRAY}
<BOUCLE_regions(GEO_REGIONS){par code_charts}{code_charts != ''}>
<BOUCLE_departements(GEO_DEPARTEMENTS){par code_charts}{code_charts != ''}>
<BOUCLE_dossiers_departement(CONCI_DIFFERENDS){cp LIKE #ABBR%}> </BOUCLE_dossiers_departement>#SET{total_boucle_departement, #TOTAL_BOUCLE}</B_dossiers_departement>
#SET{data_departement, #GET{data_departement}|push{#LISTE{#VAL{fr}|concat{'-', #_regions:CODE_CHARTS}|concat{'-', #_departements:CODE_CHARTS}, #GET{total_boucle_departement}}}}
</BOUCLE_departements>
</BOUCLE_regions>
<INCLURE{fond=inclure/highmaps, title='Nombre de dossiers par département', countries='fr/fr-all-all', data=#GET{data_departement}, ajax} />
1 « J'aime »
Super !
Dans ce cas, comment puis-je effectuer une boucle en dehors du code JS suivant qui contient 4 compteurs de données ?
Excusez-moi @pierretux je ne sais pas comment utiliser correctement #GET:
J’ai quatre lignes de code dans lesquelles je souhaite implémenter quatre boucles :
<boucle1> ['Titre', 2],</boucle1>
['Titre', 2],
['Titre', 2],
['Titre', 7],
Voici le code JS complet :
<script type="text/javascript">
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Sections', 'Articles'],
['Titre', 2],
['Titre', 2],
['Titre', 2],
['Titre', 7],
]);
var options = {
title: '',
};
var chart = new google.visualization.PieChart(
document.getElementById('piechart'),
);
chart.draw(data, options);
}
</script>
quel nom as-tu donné à ton fichier ?
Bonjour @JamesRezo , le code est du JS intégré à ma page Sommaire.
Peux-tu nous donner l’erreur affichée dans la console de ton navigateur dans ton 1er exemple ? C’est souvent l’info qui permet de trouver la solution 
Tu accèdes à la console via les outils de développement (à voir selon le navigateur que tu utilises)
@jeanmarie Après avoir examiné votre suggestion dans votre réponse ci-dessus, j’ai réussi à exécuter le graphique circulaire de Google Charts 
Le problème est résolu 
Merci à tous 
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Titre', 'Nombre'],
<B_articles>
['<BOUCLE_rubriques(RUBRIQUES){id_rubrique=1}>#TITRE</BOUCLE_rubriques>', #GRAND_TOTAL],<BOUCLE_articles(ARTICLES){id_rubrique=1}> </BOUCLE_articles></B_articles>
['Titre', 2],
['Titre', 2],
['Titre', 2],
['Titre', 7]
]);
var options = {
title: 'Titre'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
1 « J'aime »