ChartJS 2.6 - Balkendiagramm feste Höhe scrollbar-X

Question

Ich habe Probleme, das richtige Setup zu finden, um ein ChartJS Balkendiagramm zu haben, das eine feste Leinwandhöhe hat, aber die Breite overflow-x zulässt. Ich habe hier ein Beispiel gefunden ... http://jsfiddle.net/mbhavfwm/, das ChartJS 1.0 verwendet, aber ich verwende ChartJS 2.6. Also habe ich ein anderes Beispiel hier gefunden, das ChartJS 2 verwendet, aber dieses Beispiel zeigt das Diagramm, das mit nur wenigen Werten gerendert wird, und dann ADDS mehr mit JavaScript, was dann dazu führt, dass die Breite überläuft. Nicht ganz das Gleiche.

Mein Problem ist, ich kann nicht herausfinden, wie Sie das Diagramm in der festen Höhe mit allen Daten, die bereits drin sind, aber nicht versuchen, Leinwand auf die Breite des übergeordneten Containers zu beschränken. Ich möchte, dass es überläuft.

Hier ist was ich bisher habe. https://jsfiddle.net/fed79b7t/

HTML

<div class="chartWrapper"> 
    <div class="chartAreaWrapper"> 
    <canvas id="chart-FuelSpend" height="300" width="1200"></canvas> 
    </div> 
    <canvas id="axis-FuelSpend" height="300" width="0"></canvas> 
</div> 

CSS

.chartWrapper { 
    position: relative; 
} 

.chartWrapper > canvas { 
    position: absolute; 
    left: 0; 
    top: 0; 
    pointer-events: none; 
} 

.chartAreaWrapper { 
    width: 600px; 
    overflow-x: scroll; 
} 

JAVASCRIPT

function generateLabels() { 
    var chartLabels = []; 
    for (x = 0; x < 100; x++) { 
    chartLabels.push("Label" + x); 
    } 
    return chartLabels; 
} 

function generateData() { 
    var chartData = []; 
    for (x = 0; x < 100; x++) { 
    chartData.push(Math.floor((Math.random() * 100) + 1)); 
    } 
    return chartData; 
} 

var chartData = { 
    labels: generateLabels(), 
    datasets: [{ 
    label: "Test Data Set", 
    data: generateData() 
    }] 
}; 

$(function() { 
    var canvasFuelSpend = $('#chart-FuelSpend'); 
    var chartFuelSpend = new Chart(canvasFuelSpend, { 
    type: 'bar', 
    data: chartData, 
    maintainAspectRatio: false, 
    responsive: true, 
    options: { 
     tooltips: { 
     titleFontSize: 0, 
     titleMarginBottom: 0, 
     bodyFontSize: 12 
     }, 
     legend: { 
     display: false 
     }, 
     scales: { 
     xAxes: [{ 
      ticks: { 
      fontSize: 12, 
      display: false 
      } 
     }], 
     yAxes: [{ 
      ticks: { 
      fontSize: 12, 
      beginAtZero: true 
      } 
     }] 
     }, 
     animation: { 
     onComplete: function() { 
      var sourceCanvas = chartFuelSpend.chart.canvas; 
      var copyWidth = chartFuelSpend.scales['y-axis-0'].width - 10; 
      var copyHeight = chartFuelSpend.scales['y-axis-0'].height + chartFuelSpend.scales['y-axis-0'].top + 10; 
      var targetCtx = document.getElementById("axis-FuelSpend").getContext("2d"); 
      targetCtx.canvas.width = copyWidth; 
      targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight); 
     } 
     } 
    } 
    }); 
}); 

Also, mein Ziel ist es, das Diagramm die vollen 1200 Pixel wie durch die Leinwandbreite definiert zu haben, aber für das Container-div nur die 600 Pixel Menge, wo ich den Container scrollen kann, um den Rest des Diagramms zu sehen, während das Y zu halten -Achse an Ort und Stelle.

Kann jemand etwas Licht auf das werfen, was ich falsch mache? Was vermisse ich?

Vielen Dank !!!!!

Answer 1

Es scheint etwas mit der Tatsache zu tun, dass Sie einen Wrapper rund um die canvas vermissen. Hier ist eine aktualisierte Version deiner Geige. Ich habe eine function namens addData hinzugefügt, die die Anzahl der neuen Einträge, die Sie hinzufügen möchten, und die chart Variable nimmt. Es ist nicht so gut wie es sein kann (weil ich nicht 100% sicher bin, wie Sie neue Daten hinzufügen möchten), aber es ist ein guter Ausgangspunkt. Der Trick besteht darin, die chart mit allen data nicht zu initialisieren, möchten Sie die chart erstellen und dann später hinzufügen, um die Leinwand zu erweitern, sonst wird die erste Renderfunktion funktionieren, um alle data in der width passen.

https://jsfiddle.net/qmqmg82z/3/

Zusätzlicher JavaScript-Code:

function addData(numData, chart){ 
    for (var i = 0; i < numData; i++){ 
     chart.data.datasets[0].data.push(Math.random() * 100); 
     chart.data.labels.push("Label" + i); 
     var newwidth = $('.chartAreaWrapper2').width() +60; 
     $('.chartAreaWrapper2').width(newwidth); 
    } 
} 

und dann am Ende Ihrer Seite Ladefunktion (oder wo immer Sie wollen neue Daten zu hinzufügen) hinzufügen, um diesen Funktionsaufruf:

addData(5, chartFuelSpend); 

Aber bedenken Sie, dies erfordert jedoch viele Daten, die Sie hinzufügen möchten und die chart Instanz.

Und die HTML:

<div class="chartWrapper"> 
    <div class="chartAreaWrapper"> 
     <div class="chartAreaWrapper2"> 
      <canvas id="chart-FuelSpend" height="300" width="1200"></canvas> 
     </div> 
    </div> 
    <canvas id="axis-FuelSpend" height="300" width="0"></canvas> 
</div> 

Ich vermute, das Problem war, dass, weil die width der einzelnen Wrapper Sie mit den chart hatten ändern entlang, gemeint, dass die horizontale Scroll nicht angewandt wurde Auf diese Weise hat die äußere Hülle die feste width, während die innere und die Leinwand sich ausdehnen können.