jQplot - Format de l'axe des ordonnées [Résolu]

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : jQplot - Format de l'axe des ordonnées [Résolu]

Re: jQplot - Format de l'axe des ordonnées

par BaLiSTiK » 12 juin 2012, 11:38

Finalement j'ai trouvé la solution.
Je me suis inspiré de ce lien : http://www.prodevtips.com/2011/05/25/ho ... at-labels/ et de http://phpjs.org/functions/number_format:481

Le but, c'est de créer une classe jQplot, transformant le format des nombres, et ce grâce à la classe number_format. Y a certainement mieux mais faute de temps, on va au plus rapide ^^.
Ce qui donne un fichier jqplot.numberFormat.js :
[javascript]
(function($) {
$.jqplot.numberFormat = function (format, val) {
if (!format) {
format = '%d';
}
return number_format($.jqplot.sprintf(format, val), 0, ',', ' ');
};

function number_format (number, decimals, dec_point, thousands_sep) {
// Formats a number with grouped thousands
//
// version: 1109.2015
// discuss at: http://phpjs.org/functions/number_format // + original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfix by: Michael White (http://getsprink.com)
// + bugfix by: Benjamin Lupton
// + bugfix by: Allan Jensen (http://www.winternet.no) // + revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
// + bugfix by: Howard Yeend
// + revised by: Luke Smith (http://lucassmith.name)
// + bugfix by: Diogo Resende
// + bugfix by: Rival // + input by: Kheang Hok Chin (http://www.distantia.ca/)

number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals), sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function (n, prec) {
var k = Math.pow(10, prec); return '' + Math.round(n * k) / k;
};
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
if (s[0].length > 3) { s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0'); }
return s.join(dec);
}
})(jQuery);
[/javascript]

On appelle le script :
<script type="text/javascript" src="<?php echo SITEURL;?>/app/webroot/js/jquery/plugins/jqplot.numberFormat.js"></script>
et on l'utilise comme ça :
[javascript]
axes: {
yaxis: {
tickOptions: {
formatString: '%d',
formatter: $.jqplot.numberFormat
} //Valeur par defaut
}
}
[/javascript]

Amélioration à prévoir :
- Pouvoir choisir le type de séparateur que l'on souhaite (espace, point...)

Tout simplement :)

jQplot - Format de l'axe des ordonnées [Résolu]

par BaLiSTiK » 12 juin 2012, 11:08

Bonjour,

J'utilise la librairie jQplot (fonctionnant avec JQuery) pour faire divers graphes (bar, camembert...), et j'ai un dernier point bloquant concernant l'axe des ordonnées.
Je désirerai pouvoir mettre un séparateur pour les valeurs de type milliers. (avoir afficher 100 000 à la place de 100000).
Sauf que je ne trouve la méthode pour le faire.
J'ai déjà mis ceci pour être sûre de n'avoir que des entiers :
[javascript]
axes: {
xaxis : {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tabDataX
},
yaxis: {
tickOptions: {formatString: '%d'} //Valeur par defaut
}
}
[/javascript]
Je pense qu'il ya peut-être quelque chose à faire au niveau de tickOptions, notamment utiliser formatter, sauf que je ne sais que mettre dedans.

Thx :)