Graphique chronologique zoomable de style Google Finance en D3 ou Rickshaw?
Je veux créer un graphique linéaire en série temporelle en D3, avec une version plus petite du graphique ci-dessous qui permet à l'utilisateur de zoomer sur certaines sections du graphique, comme n graphique Google Finance .
L'exemple le plus proche que j'ai trouvé est ce graphique de couloir:
Quelqu'un at-il des exemples de ce faire avec un graphique linéaire en D3?
NB: Je veux vraiment une petite version du graphique avec une brosse redimensionnable sur le dessus, pas un axe X purement déplaçable/zoomable, comme cet exemple .
Idéalement, je voudrais utiliser Rickshaw , mais les exemples Rickshaw semblent seulement avoir un curseur de plage . Un exemple de pousse-pousse serait donc encore mieux.
NVD3 est un projet très cool qui a un certain nombre de graphiques réutilisables écrits à J3. Voir ici pour un exemple de graphique linéaire avec un Finder View, avec le code source.
Mise à jour: L'exemple NVD3 est désormais également lié à un exemple de Mike Bostock (créateur de D3) qui démontre une fonctionnalité similaire, le possibilité de zoomer/se concentrer sur une sélection de données, implémentée uniquement avec D3.js.
dygraphs fait exactement ce que vous voulez dans cette démo:
http://dygraphs.com/gallery/#g/range-selector
Que diriez-vous HighStock , frère moins connu de HighCharts?
Je sais que vous avez l'intention d'utiliser D3, mais Humble Finance doit être mentionné car il fait exactement ce que vous voulez avec juste du javascript et des toiles.
Si vous avez vraiment l'intention d'utiliser D3, je suppose que vous devrez créer quelque chose qui vous appartiendra, ce qui doit être une perte de temps compte tenu de la qualité et de l'humilité de la finance.
Astuce pour essayer Humble Finance: le téléchargement Zip n'inclut pas flotr2 dont il a besoin, mais il peut facilement être téléchargé depuis ici (évidemment, vous devez ensuite ajouter les fichiers flotr2 requis dans le répertoire Humble Finance dans au bon endroit).
Modifier:
Ignorer Humble Finance, j'ai beaucoup essayé de l'utiliser et cela m'a conduit au détour. La base de code semblait être assez désordonnée et vous deviez ajouter beaucoup de bibliothèques à votre page pour la faire fonctionner, il est alors très difficile d'apporter des modifications même mineures au graphique. J'utilise maintenant D3, mais j'ai trouvé que c'est SVG rendu trop lentement avec beaucoup (beaucoup et beaucoup) de points sur la courbe. J'ai fini par utiliser D3 pour dessiner les axes, configurer les échelles et rendre le changement de délai, et dessiner la courbe à l'aide d'un canevas. Cela semble assez bien fonctionner. Désolé, je n'ai l'exemple visible nulle part.
Avez-vous vu Crossfilter ? Une autre offre basée sur D3, qui possède des propriétés similaires à l'interface de Google Finance.
Rickshaw prend désormais en charge cela!
Voir exemple et Rickshaw.Graph.RangeSlider.Preview.
Je ne connais aucun des cadres que vous mentionnez, mais vous vous êtes demandé si c'était une option pour vous d'utiliser google charts à la place? En utilisant cela, vous seriez en mesure de savoir ce qu'ils font dans Google Finance et l'exemple de la façon de le faire pourrait être tiré de leur site Web.
Si vous cherchez d'autres frameworks à explorer, je peux recommander des graphiques Emprise - je suis sûr que vous seriez en mesure de faire quelque chose de similaire là-bas et leur équipe de développement est très utile.