Javascript Girl
  1. Javascript Girl
  3. HighCharts: exploration d'une colonne empilée
Intereting Posts
Une façon de modifier 'this' en JavaScript? JQuery String contient une manipulation? Insérer HTML avec des déclarations variables réactives (JSX) Existe-t-il une meilleure façon d'écrire v = (v == 0? 1: 0); Window.onerror ne fonctionne pas Jquery / js / html5 modifier le contenu de la page lorsque le clavier est visible sur les appareils mobiles En utilisant jQuery noConflict () avec script.aculo.us Accéder à la propriété globale en utilisant le mot-clé "this" dans une fonction Est-ce que je peux empêcher la carte Brochure panoramique hors des limites du monde? Quelle est la manière correcte de déclencher la manipulation de jQuery DOM à partir d'un contrôleur? Qu'est-ce que .forEach.call () fait en JavaScript? Async / attend dans le navigateur ou dans node.js? OnBeforeUnload ne fonctionne pas correctement pour Chrome Quels sont les avantages de mettre votre Javascript dans un fichier .php? InnerHTML ne fonctionne pas avec classname dans JS

HighCharts: exploration d'une colonne empilée

Salut à tous! J'essaie de créer un certain HighChart , mais je ne sais pas sur la façon dont je devrais formater mes données de recherche et je ne trouve aucun exemple sur Internet.

Ce JSfiddle montre à quel point j'ai obtenu: http://jsfiddle.net/ma50685a/37/ .

Le HighChart supposerait visualiser les commentaires qui ont été supprimés. Les deux premières barres sont des quantités moyennes de commentaires filtrés. Lorsque le déroulement est activé, je voudrais avoir des colonnes empilées de sites Web et quatre catégories de pourquoi un commentaire a été filtré (commentaires désagréables, spams, etc.).

Quelqu'un pourrait-il m'aider avec cela ou avoir un exemple de la façon de formater les données de recherche?

Pour avoir une colonne empilée, vous avez besoin de séries multiples, pour avoir plusieurs séries après la découverte, vous devez ajouter la série de manière dynamique, par exemple lors de l'événement de recherche.

Chaque propriété de l'objet ci-dessous représente une série et elle est associée au nom de la série de niveau supérieur. L'objet '1' apparaîtra après le clic sur la première colonne et couvrira 4 catégories. 

 var drilldowns = { 1: { stacking: 'normal', name: 'facebook', color: Highcharts.getOptions().colors[0], data: [ ['nasty comments', 2], ['spam', 3], ['category-3', 10], ['category-4', 15] ] }, 66: { name: 'second-column-drilldown', data: [ ['second-column-drilldown-point', 10] ] } };

L'objet suivant '1' sera empilé avec les données de l'objet drilldowns.1 : 

 var drilldowns2 = { 1: { color: Highcharts.getOptions().colors[1], colorIndex: 1, stacking: 'normal', name: 'youtube', data: [ ['nasty comments', 5], ['spam', 10], ['category-3', 10], ['category-4', 15] ] } };

Et enfin, la série doit être ajoutée et le décompte est déclenché. 

 var series = drilldowns[e.point.name], series2 = drilldowns2[e.point.name], series3 = drilldowns3[e.point.name]; this.addSingleSeriesAsDrilldown(e.point, series); this.addSingleSeriesAsDrilldown(e.point, series2); this.addSingleSeriesAsDrilldown(e.point, series3); this.applyDrilldown();

Exemple: https://jsfiddle.net/ahjkouuh/

Vous avez simplement oublié d'inclure le jill drilldown ( http://jsfiddle.net/ma50685a/38/ )

Ajoutez le script suivant après le déblocage: <script src="https://code.highcharts.com/modules/drilldown.js"></script>

EDIT: Désolé, je n'ai pas lu la question … Cela fonctionne: http://jsfiddle.net/ma50685a/39/

Trouvé ici: http://www.semantia.com.au/articles/highcharts-drill-down-stacked-columns/