2010-06-23 13 views
0

J'essaie de mettre en page 2 graphiques liés les uns au-dessus des autres, similaires à ceux que vous pouvez voir sur la page Google Finance.dojox.charting: comment aligner le plotArea de 2 cartes, l'une au-dessus de l'autre?

Je peux rendre les deux graphiques très bien, mais il est un peu mystérieux d'aligner exactement les tracés. Le graphique chart.plotArea.width de chaque graphique semble dépendre de la largeur de mes étiquettes d'axe Y. Donc les 2 graphiques n'ont pas la même largeur et ont des valeurs différentes pour chart.getCoord().l.

Pour le moment, j'utilise un offset qui est calculé manuellement, mais il doit y avoir un meilleur moyen.

this.chart.render(); // top chart, getCoords().w=800 

// manually set margins for lower chart to match 
this.chartVol.margins.l = this.chart.offsets.l - 59 + 10; 
this.chartVol.margins.r = this.chart.offsets.r - 31 + 10; 

// render bottom chart 
this.chartVol.render(); // bottom chart same width, getCoords().w=800 

Répondre

0

Il y a deux façons simples de le faire:

  1. Utilisez maxLabelSize et labelFunc. La première est la taille de l'étiquette maximale en pixels. Ce dernier est une fonction qui prend un nombre et renvoie une étiquette de chaîne correspondante.
  2. Utilisez labels, qui est un tableau de {value, text} objets, et inclure une longue chaîne fictive de la taille désirée à la fin avec une certaine valeur fausse.

Je ne me souviens pas comment le faire sans étiquettes personnalisées, donc si vous vous sentez comme il est vraiment nécessaire, s'il vous plaît submit an enhancement ticket.

+0

J'ai essayé d'utiliser la même ficelle pour les étiquettes, mais les tracés sont toujours décalés de quelques pixels. Q: Où est le doc pour maxLabelSize? à quelle classe appartient-il? J'ai essayé chart.addAxis ('y', {maxLabelSize: 5}) mais ça n'a pas semblé faire quoi que ce soit. – michael

+0

A: dans le code source de dojox/charting/axis2d/Default.js pour le moment. En ce qui concerne votre tentative infructueuse: {maxLabelSize: 5) est de 5 pixels. Je doute que c'était l'idée. Et vous devez l'utiliser avec labelFunc. Voir le corps de ma réponse ci-dessus. –