Javascript Girl
  1. Javascript Girl
  3. Est-il possible dans les diagrammes élevés d'avoir 2 graphiques, partageant le même axe x, mais à côté de l'autre?
Intereting Posts
Séparation angulaire js à différents modules dans différents fichiers js Textarea onchange detection Obtenir la valeur de la fratrie de la clé dans un objet JavaScript littéral Django – Ingénierie inverse le bouton "Ajouter une clé étrangère" du site Admin Analyser un Int à partir d'une chaîne dans javascript Test des extensions de navigateur Concernant onSignIn (googleUser) Passer des params aux composants enfants dans Knockout Convertir UNIX Temps en mm / jj / aa hh: mm (24 heures) en JavaScript Objet JavaScript (JSON) vers le format de chaîne d'URL Expression angularjs dans html <object> tag Comment obtenir le nom du fichier lorsque l'utilisateur sélectionne un fichier via <input type = "file" />? Code Jquery pour menu déroulant multi-niveaux Comment la Date () dans javascript fonctionne-t-elle? Quelle est la manière idéale d'envoyer un paramètre de date sur une requête GET dans Play Framework?

Est-il possible dans les diagrammes élevés d'avoir 2 graphiques, partageant le même axe x, mais à côté de l'autre?

J'ai trouvé ça:

Http://jsfiddle.net/tungwaiyip/F3pts/6/

Mais ce n'est pas ce que je veux. Je dois avoir quelque chose d'similaire mais avec les tableaux partageant l'axe des x. 

top: 300;

Le réglage ci-dessus dans yAxis fait l'astuce sur l'axe y, mais je ne vois rien de tel pour l'axe des x.

Est-il possible dans les diagrammes élevés d'avoir 2 graphiques, partageant le même axe x, mais à côté de l'autre?

Voici mon violon: http://jsfiddle.net/PcWSu/

Les mêmes propriétés que vous pouvez utiliser pour xAxis (haut, gauche, largeur, hauteur), voir: http://jsfiddle.net/F3pts/7/ 

 xAxis: [{ gridLineWidth: 1, width :150 }, { offset: 0, gridLineWidth: 1, width :150, left: 230 }],

Vous voudrez peut-être passer à travers cette violon https://jsfiddle.net/ajaytripathi10/z8mrwhxz/ où vous pouvez voir une info-bulle partagée avec plusieurs axes X et Y. J'espère que cela aidera. 

 $(function () { $('#container').highcharts({ title: { text: 'Shared tooltip chart' }, xAxis: [{ type: 'datetime', id: 'x1' }, { type: 'datetime', id: 'x2', opposite: true }], yAxis: { min: 0 }, tooltip: { shared: true, useHTML: true, formatter: function () { var tooltip = ''; var i, len; tooltip += '<small>Apple</small>'; tooltip += '<table>'; for (i = 0, len = 4; i < len; i++) { if(this.points[i] != undefined){ if(this.points[i].series.name.indexOf('Apple') >= 0){ tooltip += '<tr>'; tooltip += '<td style="color: ' + this.points[i].series.color + '">\u25CF</td>'; tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>'; tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>'; tooltip += '</tr>'; } } } tooltip += '</table>'; tooltip += '<small>Mango</small>'; tooltip += '<table>'; for (i = 0, len = 4; i < len; i++) { if(this.points[i] != undefined){ if(this.points[i].series.name.indexOf('Mango') >= 0){ tooltip += '<tr>'; tooltip += '<td style="color: ' + this.points[i].series.color + '">\u25CF</td>'; tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>'; tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>'; tooltip += '</tr>'; } } } tooltip += '</table>'; return tooltip; } }, series: [{ name: 'Apple', id: 'series1', xAxis: 'x1', color: 'rgba(255, 0, 0, 1.0)', data: [5, 3, 4, 7, 6, 1, 0], pointInterval: 1000 * 60 * 60 * 24, pointStart: Date.UTC(2015, 2, 10) }, { name: 'Apple New', id: 'series2', //linkedTo: 'series1', xAxis: 'x2', color: 'rgba(255, 180, 180, 1.0)', data: [4, 5, 5, 6, 1, 3, 4], pointInterval: 1000 * 60 * 60 * 24, pointStart: Date.UTC(2015, 2, 17) },{ name: 'Mango', id: 'series3', xAxis: 'x1', color: 'rgba(255, 0, 0, 1.0)', data: [15, 13, 14, 17, 16, 11, 10], pointInterval: 1000 * 60 * 60 * 24, pointStart: Date.UTC(2015, 2, 10) }, { name: 'Mango New', id: 'series4', //linkedTo: 'series1', xAxis: 'x2', color: 'rgba(255, 180, 180, 1.0)', data: [14, 15, 15, 16, 11, 13, 14], pointInterval: 1000 * 60 * 60 * 24, pointStart: Date.UTC(2015, 2, 17) }] }); });