Javascript Girl
  1. Javascript Girl
  3. Utilisation de Highcharts.js pour créer un graphique de style de carte perforée
Intereting Posts
Requête de Cross Cross de Firefox Bon projet opensource JS pour l'apprentissage? Quels sont les avantages et les dangers de l'ajout de méthodes à Object.prototype en Javascript? Javascript String.replace (/ \ $ /, str) fonctionne scrupuleusement dans le fichier jsp Comment calculer le module d'entiers négatifs en JavaScript? Obtention d'un élément par un attribut personnalisé en utilisant JavaScript Quelle est la différence entre les modules browserify / requirejs et les modules ES6 Dessiner des lignes non continues avec d3 Comment changer la classe active tout en cliquant sur un autre lien dans bootstrap use jquery? Suites vs Specs Protractor Comment obtenez-vous l'URL précédente en version Javascript? Comment utiliser Python / CGI pour le téléchargement de fichiers AJAXifying vote dans Rails 4 en utilisant Thumbs_up gem FFT en JavaScript Chosen.js et valide jquery

Utilisation de Highcharts.js pour créer un graphique de style de carte perforée

Je voudrais reproduire le graphique de style "punch-card" présenté sur github via les diagrammes élevés.

GitHub Punch Card Graph

Je suis vraiment en train de lutter avec celui-ci, voici un jsfiddle qui commence à m'entendre là-bas. Je préférerais avoir des jours sur l'heure et l'heure sur le x, mais je suis en perte de la façon dont je devrais faire cela.

Toute aide appréciée.

TIA!

Je n'ai pas été capable de basculer l'axe mais réglé beaucoup de choses pour vous.

HTML: 

<div id="container" style="height: 400px"></div>

JS: 

 var chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'scatter' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { }, plotOptions: { scatter: { marker: { radius: 4, states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } } }, states: { hover: { marker: { enabled: false } } } } }, series: [{ data: [{y: 161}, {y: 167}, {y: 165}, {y: 140}, {y: 172}, {y: 163}, {y: 187}, {y: 107}, {y: 147}, {y: 145}, {y: 112}, {y: 199}] }] });

Je suppose que c'est trop tard, mais peut-être que cette solution aidera d'autres personnes dans la même situation.

Voici ma solution: 

 $(function () { $('#container').highcharts({ chart: { defaultSeriesType: 'scatter' }, title: { text: 'Punchcard' }, xAxis: { type: "datetime", dateTimeLabelFormats: { hour: '%I %P' }, tickInterval: 3600000 * 1 }, yAxis: { categories: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], }, series: [{ data: [ {y: 0, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, {y: 0, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, {y: 1, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, {y: 2, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, {y: 3, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, {y: 4, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, {y: 5, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, {y: 6, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, ] }] }); });

Et voici la démo: http://jsfiddle.net/KmPJE/1/

Laissez-moi savoir si cela fonctionne pour vous.

J'ai mis à jour le jsFiddle à partir de @mangobug pour vous guider vers une façon plus étroite de faire ce que vous voulez