Modifier l'affichage de la légende

**Lprofessionnelle** · 23/03/2017, 11h19

Bonjour
J'ai une petit problème avec highcharts qui permet d'afficher des graphiques qui est d'ordre d'affichage.
Pour faire simple j'affiche un donut ou chaque morceau est une semaine et ça valeur est en seconde pour faire des calculs facilement, mais quand on regarde la valeur on a donc le résultat en seconde et j'aurais bien aimer qu'a l'affichage je puisse l'afficher en heure minutes et seconde, c'est possible ? En gros j'aimerais personnaliser la legende pour chaque éléments
Merci

**mathieu** · 23/03/2017, 13h48

regardez les exemples de cette discussion :
https://www.developpez.net/forums/d1...dates-tooltip/

si cela ne suffit pas, montrez nous un exemple de code qui ne fonctionne pas comme vous voulez

**Lprofessionnelle** · 24/03/2017, 19h36

Ca m'aide pas.
En gros, il me faudrait deux valeurs, celle a mettre comme données(les secondes) et celle a afficher: 6 heures 20 minutes... J'ai rien trouvé pour faire cela

**melka one** · 24/03/2017, 20h22

jour

et en le faisant en amont ?

**NoSmoking** · 25/03/2017, 12h45

Bonjour,

Envoyé par Lprofessionnelle

... J'ai rien trouvé pour faire cela

as tu regardé du coté de

Code :

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

1
2
3
4
dataLabels: {
    formatter: function () {
    }
}

**Lprofessionnelle** · 26/03/2017, 21h00

J'avais pas vu ça fonctionne comment ?

**NoSmoking** · 28/03/2017, 19h35

Comme c'est indiqué dans la documentation

Pour le fun un rapide exemple qui me traine remodelé et utilisant la méthode Highcharts.dateFormat pour laquelle il faut passer des temps en milliseconde.

Code html :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[HighChart]Formatter tooltip</title>
<meta name="Author" content="NoSmoking">
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 600px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'Titre du graphique'
  },
  tooltip: {
    formatter: function() {
      return '<div><b>' + this.point.name + '</b><br>' + Highcharts.dateFormat('%H:%M:%S', this.y * 1000) +'</div>'; // en milliseconde
    }
  },
  series: [{
    name: 'Semaine',
    data: [
      ['Lundi', 8.25 * 3600],
      ['Mardi', 4 * 3600],
      ['Mercredi', 5.5 * 3600],
      ['Jeudi', 2.75 * 3600],
      ['Vendredi', 6.15 * 3600],
      ['Samedi', 1 * 3600],
      ['Dimanche', 1 * 3600]
    ],
    dataLabels: {
      formatter: function() {
        return '[ ' + this.point.name + ' ]';
      },
      distance: 30
    }
  }]
});
</script>
</body>
</head>

**Lprofessionnelle** · 02/04/2017, 19h48

Ce que j'aimerais faire c'est affiché le mois Janvier en gras comme sur l'image, mais de rajouter aussi l'année dans l'infobule par exemple... et personnalisé aussi la seconde ligne pour chaque éléments chose que je n'arrive pas. Ce que je veux en gros c'est afficher plus d'info pour chaque éléments dans les infobulles sans polluer la légende a l'extérieur du graphique.

Nom : g.jpg
Affichages : 959
Taille : 19,1 Ko

Nom : g.jpg
Affichages : 959
Taille : 19,1 Ko

**NoSmoking** · 03/04/2017, 13h47

Tu as toutes les billes pour faire ce que tu veux dans la tooltip

Code :

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

1
2
3
4
  tooltip: {
    formatter: function() {
      return '<div><b>' + this.point.name + '</b><br>' + Highcharts.dateFormat('%H:%M:%S', this.y * 1000) +'</div>'; // en milliseconde
    }

**Lprofessionnelle** · 03/04/2017, 14h16

mais dans ce qu'a comment je fais pour passer des truck en paramètre a la fonction du tooltip pour personnaliser ?
car moi j'aimerais pouvoir personnaliser le texte sur la ligne avant le résultat pour qu'il soit différend a chaque fois.
Il faudrait donc que je rajoute une ligne au tableau si c'est possible dans le tableau data qui contient les données et que j'y passe en paramètre ? Mais je ne sais pas comment la récup.

EDIT: j'ai réussi comme ça:

Code :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script type="text/javascript">
$(function () {
    Highcharts.chart('donut3', {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 30
            }
        },
        title: {
            text: 'Temps passé  par mois sur l\'année <?=$annee;?>'
        },
        subtitle: {
            text: 'Source: moi'
        },
        plotOptions: {
            pie: {
                innerSize: 100,
                depth: 30
            }
        },
  tooltip: {
    formatter: function() {
		console.log(this);
      return '<div><b>' + this.point.name + '</b><br>=>' + this.point.test + Highcharts.dateFormat('%H:%M:%S', this.y * 1000) +'</div>'; // en milliseconde
    }
  },
		series: [{
            name: 'Temps passé par mois',
            colorByPoint: true,
            data: [
<?php
                        foreach($graphique_array['duree_sec']['mois'] as $key => $value)
                        {
?>
			{
                name: '<?=DateMois($key);?>',
                y: <?=($value);?>,
                "test": 'test <?=$key;?>'
            },
<?php
                        }
?>],
    dataLabels: {
      formatter: function() {
		console.log(this);
        return '[' + this.point.name + ']';
      },
      distance: 30
    }
        }]
    });
});
</script>

C'est exactement ce que je voulais, j'espère que ça aidera des gens.

Modifier l'affichage de la légende [HighCharts]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager