Plugin Flot Bubbles - Taille de bulle

Question

J'utilise le plugin Bubbles avec la bibliothèque de graphiques Flot pour JQuery. Les données que j'ai sont dynamiques et peuvent être assez variées dans les valeurs X, Y et Z. Le principal problème que j'ai est la taille des bulles. Si les valeurs X et Y sont quelque peu proches les unes des autres mais que la valeur Z est beaucoup plus grande, la bulle prend simplement le dessus. Le réglage de l'axe min et max pour les axes X et Y aide un peu mais pas dans tous les cas. J'ai essayé de chercher d'autres options et paramètres mais je n'ai rien trouvé d'utile. Existe-t-il un moyen de contrôler la taille de la bulle? Par exemple, Flex permet de créer automatiquement des tailles de bulles par rapport à l'écran et aux axes où Flot semble toujours définir la taille des bulles à la même échelle que les valeurs X et Y. J'ai inclus juste un échantillon de données. Je voudrais continuer à utiliser Flot comme plugin parce que j'ai beaucoup d'autres types de graphiques dans mon application et que j'aimerais utiliser la même base de code. Cependant, s'il y a un autre plugin qui serait mieux, je suis ouvert aux idées. Merci!

https://jsfiddle.net/llamajuana/zd4hd7rb/

var d1 = [[30,339,139856], [30, 445,239823], [30,1506,127331]]; 

    var options = { 
     series: { 
      //color: '#CCC', 
      color: function(x, y, value) { 
       var red = 55 + value * 10; 
       return 'rgba('+red+',50,50,1)'; 
      }, 
      bubbles: { 
       active: true, 
       show: true, 
       fill: true, 
       linewidth: 0, 
       bubblelabel: { 
        show: true 
       }, 
       highlight: { 
        show: true, 
        opacity: 0.3 
       } 
      } 
     }, 
     grid:{ 
      hoverable: true, 
      clickable: true 
     }, 

     tooltip: { 
      show: true, 
      content: "x: %x | y: %y | value: %ct" 
     } 
    }; 
    var p4 = $.plot($("#plot"), [d1], options); 

Answer 1

Vous pouvez essayer échelle logarithmique.

Pour les axes x et y, vous pouvez le faire en utilisant transform property in the axis options ou en modifiant les données avant de dessiner le tracé.

Pour les bulles que vous avez à faire à la main, soit en changeant les données avant de tirer ou en remplaçant le plug-in fonction drawbubble des bulles (voir le utilisateur dessiner exemple here).

Voir ce fiddle pour l'exemple complet. Changements de votre violon:

1) Vous pouvez changer cela directement dans le plugin bubbles, si vous le souhaitez.

// index of bubbles plugin is dynamic, you better search for it 
var defaultBubbles = $.plot.plugins[1].options.series.bubbles.drawbubble; 
var logBubbles = function(ctx, serie, x, y, v, r, c, overlay){ 
    defaultBubbles(ctx, serie, x, y, v, Math.log(r), c, overlay); 
} 

2) Dans les options de la série:

xaxis: { 
    transform: function (v) { 
     return Math.log(v); 
    }, 
    inverseTransform: function (v) { 
     return Math.exp(v); 
    } 
}, 
yaxis: { 
    transform: function (v) { 
     return Math.log(v); 
    }, 
    inverseTransform: function (v) { 
     return Math.exp(v); 
    } 
}, 

3) Dans la fonction radiusAtPoint() dans les bulles plugin:

// added Math.log function here too 
    return parseInt(series.yaxis.scale * Math.log(series.data[radius_index][2])/2, 0);