Modifier l'affichage de la légende

Version imprimable

23/03/2017, 11h19
Lprofessionnelle

Modifier l'affichage de la légende

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
23/03/2017, 13h48
mathieu

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
24/03/2017, 19h36
Lprofessionnelle

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
24/03/2017, 20h22
melka one

jour

et en le faisant en amont ?
25/03/2017, 12h45
NoSmoking
Bonjour,

Citation:

Envoyé par Lprofessionnelle

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

as tu regardé du coté de
Code:

1 2 3 4 dataLabels: { formatter: function () { } }
26/03/2017, 21h00
Lprofessionnelle

J'avais pas vu ça fonctionne comment ?

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:

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>

02/04/2017, 19h48
Lprofessionnelle

1 pièce(s) jointe(s)

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.

Pièce jointe 260321

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

Code:

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
    }

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:

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.