Afficher "PAS DE DONNEES" à la place du graphe

**Zebulon777** · 10/10/2018, 15h09

Bonjour à tous,

c'est sans doute très bête, mais je n'arrive pas à écrire "PAS DE DONNEES" en lieu et place du graphique ?

Pour faire simple, je voulais forcer l'affichage, pour voir ce que ça donne, mais ça ne fonctionne pas :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
if (jsonData[3].length > 0 || jsonData[0].length > 0) {
	update = true;
	if ($("#LIG_HG_LFPB_LFOB").children().length == 0) {
//					addHTML("lfob", ["lfob_hg"], ["12"]); // on se place dans le div row ID="lfob", on crée une div lfob_hg col-md-12
		addHTML("LIG_HG_LFPB_LFOB", ["lfpb_hg_left","lfob_hg_right"], ["6","6"]); // Graph de gauche=LFPB / Graph de droite=LFOB
	}
	createGraph_HG("LFPB", jsonData[3], WdayInit);
	createGraph_HG("LFOB", jsonData[0], WdayInit);
} else {
	$("#LIG_HG_LFPB_LFOB").empty();
}
 
if (jsonData[0].length <= 0) {
	$("#lfob_hg_right").html('<strong>Pas de données</strong>');
}

C'est dans la partie rose que je voudrait pouvoir afficher "PAS DE DONNEES"
Nom : Echarts101.png
Affichages : 102
Taille : 86,8 Ko

Merci d'avance.

**NoSmoking** · 11/10/2018, 19h02

Bonjour,

c'est sans doute très bête, mais je n'arrive pas à écrire "PAS DE DONNEES" en lieu et place du graphique ?

Prend un feutre^(*) et écrit sur l'écran

Plus sérieusement, il te suffit de placer une <div> contenant ton message sur ton graphe.

^(*) avec encre effaçable il va de soit !

**Zebulon777** · 12/10/2018, 08h37

Envoyé par NoSmoking

Bonjour,
Prend un feutre^(*) et écrit sur l'écran

C'est ce que j'ai fait (réellement, pour déconner), mais je ne sais pas pourquoi, ils n'ont pas aimé

Envoyé par NoSmoking

Plus sérieusement, il te suffit de placer une <div> contenant ton message sur ton graphe.

^(*) avec encre effaçable il va de soit !

Oui, ça j'y ai pensé, mais je pensais qu'il y avait moyen d'écrire directement dans le graphe ?

**NoSmoking** · 12/10/2018, 13h32

Il y a moyen d'écrire directement dans le <canvas> du graphique seulement au moindre mouvement de la souris sur celui-ci ce que tu viens d'écrire sera effacé à cause du « repaint ». Il te faudrait dans ce cas inhiber les événements liés au graphique.

La solution de mettre sur le graphique un élément qui le recouvre te permet donc de supprimer l'effet des événements qui, si il n'y a pas de données, ne servent à rien.

Une solution à mon sens élégante est de modifier la classe de l'élément parent du graphique, exemple class="no-data" et de gérer l'affichage du message en CSS via un pseudo-élément ::after.

Exemple de CSS à appliquer :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#graphe.no-data::after {
  content: "Pas de données disponibles";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  text-shadow: 0 0 8px #008;
  font-size: 2.5em;
  font-weight: bold;
  line-height: 400px;   /* hauteur du graphique */
  color: #FFF;
}

**Zebulon777** · 12/10/2018, 13h58

Oula, je comprends, mais mes connaissances CSS ne vont pas jusque là

Donc en script ça serait quoi ?

Un truc du genre $(#graphe.class="no-data" ?
Mais on va se retrouver dans la même situation de nom de la div inconnu, non ?

**NoSmoking** · 12/10/2018, 14h16

Mais on va se retrouver dans la même situation de nom de la div inconnu, non ?

Non il s'agit de l'élément dans lequel tu déclares ton graphique, echarts.init(document.getElementById("lfpg_hg")) qui devrait d’ailleurs s'écrier echarts.init($("#lfpg_hg") comme tu utilises jQuery.

Il suffit donc de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$("#lfpg_hg").addClass("no-data");    // pour ajouter la classe
$("#lfpg_hg").removeClass("no-data"); // pour supprimer la classe

**Zebulon777** · 12/10/2018, 14h23

Ca ne lui plait pas du tout : Uncaught TypeError: "#lfob_hg_right".addClass is not a function.

J'ai bien ajouté la class :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
#lfob_hg_right.no-data::after {
  content: "Pas de données disponibles";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  text-shadow: 0 0 8px #008;
  font-size: 2.5em;
  font-weight: bold;
  line-height: 400px;   /* hauteur du graphique */
  color: #FFF;
}

Et le code :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
if (jsonData[0].length == 0) {
   ("#lfob_hg_right").addClass("no-data");    // pour ajouter la classe
}

**NoSmoking** · 12/10/2018, 17h44

Et en plus tu recopies mal

$("#lfob_hg_right").addClass("no-data"); // pour ajouter la classe

**Zebulon777** · 15/10/2018, 09h36

Oups !

Rhooo, si en plus, il faut bien recopier ! On ne me dit jamais rien à moi !

Bon, ben, encore merci, ça fonctionne impec.

**Zebulon777** · 15/10/2018, 12h59

Dis, impossible de centrer le texte, horizontalement et verticalement, dans la div ???
Je merdouille surement quelque part, mais je ne vois pas, pour le moment !

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
#lfpg_tj.no-data::after {
	content: "Pas de données disponibles";
	position: absolute;
/*	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding-left: 130px;
*/	
	align:center;
	vertical-align: middle;
	text-align: center;
	text-shadow: 0 0 8px #008;
	font-size: 2em;
	font-weight: bold;
	line-height: 300px;   /* hauteur du graphique */
	color: #FFF;
}

**NoSmoking** · 15/10/2018, 18h58

Je t'ai fourni une règle CSS qui fonctionne pourquoi vouloir la modifier

Dans cette règle c'est

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

line-height: 300px;   /* hauteur du graphique */

qui assure le centrage vertical.

**Zebulon777** · 16/10/2018, 07h55

Yep, j'ai vu (après coup

), et pour mon apprentissage, je ne comprends pas pourquoi tu as utilisé ce line-height au lieu d'un vertical-align et pourquoi le vertical-align ne fonctionne pas si je supprimer le line-height ?

**NoSmoking** · 17/10/2018, 18h59

Il faudrait quand même que tu te penches sur les fondamentaux du CSS,
comme ton élément est en position:absolute celui-ci n'occupe que la place qui est nécessaire à l'affichage de son contenu. Le vertical-align sur le parent ne sert donc strictement à rien.

Le line-height oblige l'élément à occuper une hauteur donnée, suivant la valeur de cette propriété, et cerise sur le gâteau le centre verticalement.

Je pense qu'un petit effort de ta part serait nécessaire

**Zebulon777** · 18/10/2018, 07h55

J'aimerai bien pouvoir m'y plonger à corps perdu (heu, pas si perdu, quand même

), mais malheureusement, je n'en ai pas le temps, j'apprends donc petit à petit, sur le tas, grâce à ce que je trouve sur le net mais aussi et surtout grâce à des gens comme toi qui partagent et qui aident.

J'avais déjà trouvé les 2 liens que tu mentionnes, mais par contre, je n'avais pas compris l'interaction entre les 2.

Afficher "PAS DE DONNEES" à la place du graphe [ECharts]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager