Wie kann ich ein horizontales Scroll-Chart.js-Liniendiagramm mit einer gesperrten Y-Achse erstellen?

Question

Ich möchte ein Liniendiagramm mit Chart.Js erstellen, aber die Y-Axis nicht bewegen, wenn ich blättern.

Ich nehme an, ich kann eine feste Breite verwenden, und legen Sie es in einem Container div mit overflow:auto, aber dann die Y-axis Info ist an die Leinwand und scrollt entlang.

Ich sehe keinen Parameter oder eine Option dafür in den Dokumenten. Irgendwelche Ideen?

Danke

Answer 1

Scrollbare Diagramm

Sie auf dem richtigen Weg sind so ziemlich. Wenn Sie einen weiteren Wrapper und die Y-Achse hinzufügen, sind Sie fertig.

---

Vorschau

---

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> 

Script

... 

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/