ChartJS 2.6 - 棒グラフの固定高さスクロール可能なX

Question

ChartJS棒グラフのキャンバスの高さは固定されていても、幅はオーバーフローxになるようにするために、正しい設定をするのに問題があります。私はここで例を見つけました... http://jsfiddle.net/mbhavfwm/ ChartJS 1.0を使用していますが、私はChartJS 2.6を使用しています。この例ではChartJS 2を使用している別の例がありますが、この例では値が少数しか表示されず、javascriptを使用して幅がオーバーフローするようにADDSを追加しています。全く同じではありません。

私の問題は、すべてのデータが既に固定高さでレンダリングされるようにする方法はわかりませんが、キャンバスを親コンテナの幅に拘束しようとしません。私はそれがオーバーフローしたい。

これまで私がこれまで持っていたことは次のとおりです。 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); 
     } 
     } 
    } 
    }); 
}); 

私の目標はキャンバスの幅で定義されたフル1200ピクセルのグラフを持つことですが、Yを維持しながらコンテナをスクロールして残りのグラフを表示できるコンテナdivのみをコンテナdivに表示することです - 軸は所定の位置にある。

誰かが私が間違っていることについていくつかの光を当てることができますか？私は何が欠けていますか？

ありがとうございます!!!!!

Answer 1

canvasの周りにラッパーがないという事実と関係しているようです。ここにあなたのフィドルの更新版があります。私はaddDataというfunctionを追加しました。追加する新しいエントリの数と変数chartが必要です。それは可能な限り良いものではありません（私はあなたが新しいデータをどのように追加したいかを100％確信しているわけではないので）が、それは素晴らしい出発点です。を初期化しないでください。が含まれている場合は、chartを作成して後で追加してキャンバスを展開します。そうでない場合は、widthにdataのすべてが収まるようになります。

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

追加するJavaScriptコード：

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); 
    } 
} 

してから、ページの読み込み機能の終了（またはどこが新しいデータを追加することにしたい）で、この関数の呼び出しを追加します。

addData(5, chartFuelSpend); 

しかし、これには追加するデータと、chartインスタンスが必要です。

そして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> 

私はこの問題を推測している単一のラッパーのwidthは、あなたがchartと一緒に変化していたので、それは横スクロールが適用されていなかったことを意味していることでしたこのようにして、外側のラッパーは固定されたwidthを持ち、内側のものとキャンバスは拡張することができます。