Comment puis-je créer un diagramme de ligne Chart.js de défilement horizontal avec un axe y verrouillé?

Je voudrais créer un graphique en ligne avec Chart.Js mais que l' Y-Axis ne bouge pas lorsque je me défile.

Je suppose que je peux utiliser une largeur fixe, et le mettre dans un conteneur div avec overflow:auto , mais ensuite, l'information de l' Y-axis est attachée à la toile et se déplace.

Je ne vois pas un paramètre ou une option pour cela dans les documents. Des idées?

Je vous remercie

Graphique défilable

Vous êtes à peu près sur la bonne voie. Si vous ajoutez un autre wrapper et que l'axe y est terminé.

Aperçu

Entrez la description de l'image ici

CSS

 .chartWrapper { position: relative; } .chartWrapper > canvas { position: absolute; left: 0; top: 0; pointer-events:none; } .chartAreaWrapper { width: 600px; overflow-x: scroll; }

HTML

 <div class="chartWrapper"> <div class="chartAreaWrapper"> <canvas id="myChart" height="300" width="1200"></canvas> </div> <canvas id="myChartAxis" height="300" width="0"></canvas> </div>

Scénario

 ... new Chart(ctx).Line(data, { onAnimationComplete: function () { var sourceCanvas = this.chart.ctx.canvas; // the -5 is so that we don't copy the edges of the line var copyWidth = this.scale.xScalePaddingLeft - 5; // the +5 is so that the bottommost y axis label is not clipped off // we could factor this in using measureText if we wanted to be generic var copyHeight = this.scale.endPoint + 5; var targetCtx = document.getElementById("myChartAxis").getContext("2d"); targetCtx.canvas.width = copyWidth; targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight); } });

Fiddle – http://jsfiddle.net/mbhavfwm/