Javascript Girl
  1. Javascript Girl
  3. Graphique de ligne sur MultiBar Graph NVD3, d3.js
Intereting Posts
Comment décompter jusqu'à une date Fermez un menu avec un clic n'importe où L'appel de l'objectif-c au javascript n'arrive pas Obtenir la sélection DOM dans le contextemen de l'extension chrome Undefined n'est pas une fonction, Google Geolocation Les étiquettes <script> sont-elles activées dynamiquement? Comment appeler getBasicProfile () de google to google signin sur le seul clic de bouton? Node.js – Comment formater une chaîne de dates en UTC Comment appeler la fonction jQuery en HTML renvoyé par AJAX Diviser une corde par des virgules mais ignorer les virgules dans les guillemets doubles en utilisant Javascript Pourquoi le travail console.log n'est-il pas passé en tant que paramètre pour tout? Autoriser un redimensionnement de la zone de texte à rétrécir (ne pas simplement croître) l'élément de sa taille d'origine / par défaut Javascript pour exporter le tableau html vers Excel Expression régulière pour vérifier si le texte du code postal ne provient pas d'un état particulier Changez la valeur de la saisie, puis soumettez le formulaire en JavaScript

Graphique de ligne sur MultiBar Graph NVD3, d3.js

NVD3 dispose d' un diagramme multi-barres et d'un diagramme à barres ligne plus . Mais il semble, il n'y a pas quelque chose comme le graphique de ligne multibar plus.

J'ai l'habitude de jouer autour de la ligne plus le graphique à barres pour en faire un graphique de ligne à plusieurs barres.

Voici le format dans lequel la ligne plus le graphique à barres accepte les données: 

[ { "key" : "Quantity", "bar": true, "values" : [[1136005200000, 127], [1138683600000, 271]] }, { "key" : "Price", "values" : [[1136005200000, 71.89], [1138683600000, 75.51]] } ]

Donc, pour ajouter plusieurs barres, j'ai essayé de changer les données pour: 

 [ { "key" : "Quantity", "bar": true, "values" : [[1136005200000, 127], [1138683600000, 271]] }, { "key" : "Quantity1", "bar": true, "values" : [[1136005200000, 127], [1138683600000, 271]] }, { "key" : "Price", "values" : [[1136005200000, 71.89], [1138683600000, 75.51]] } ]

Cela montre les étiquettes, la quantité et la quantité1 en haut, mais le nombre total de barres est encore deux (un pour chaque au lieu de deux pour chaque).

Comme je reçois les étiquettes au sommet, je sens que cela est faisable 🙂

Voici le violon .

Expliquer l'énoncé du problème: disons qu'il y a une librairie avec différents livres. Je souhaite montrer le nombre maximum et min. De livre vendu dans un jour sur une période d'un mois en tant que barres et la vente totale au cours de ce mois en tant que graphique linéaire. Donc, pour chaque mois sur l'axe des x, il devrait y avoir deux barres et un point (pour le graphique linéaire).

La vraie réponse à cette question pour toute autre personne se demandant est soit de convertir stacked to true dans nv.models.multiChart ou de créer un autre modèle basé sur nv.models.multiChart. 

  bars1 = nv.models.multiBar().stacked(true).yScale(yScale1), bars2 = nv.models.multiBar().stacked(true).yScale(yScale2)

Numéro de ligne dans le code source:

https://github.com/novus/nvd3/blob/master/src/models/multiChart.js#L34

Et je transmets les données de la manière suivante: 

 data.push({ type: "bar", key: series.name, values: seriesData, yAxis: 1 } )

Vérifiez l'exemple de multiChart.html à partir d'exemples de paquetage nvd3. Cet exemple utilise le type multiChart et affiche 2 points de ligne, 2 points de zone et 3 bars par point x, de sorte qu'il peut également afficher seulement 2 bars et 1 point de ligne.