ChartJSを使用した棒グラフのページ分割

Question

私は棒グラフでいくつかのデータを表示するためにchartJSを使用しています。 chartJsにいくつかの問題があります。私は100以上のデータフィールドのために多くのデータを提出しなければならず、それは長く持続するラベルを持っています。

棒グラフの設定方法は？

がここにここに私の棒グラフのスクリーンショット

iは100のデータ提出を持っている上記の例では、私のFIDDLE

です、私はこの棒グラフをページ分割することができますか？

はここにあなたがラッパークラスでcanvasをラップし、あなたに最適なスイートれ、それに応じて幅を変更することができ、私のコード

var lbl = []; 
var dt = []; 
for(var i = 1;i<=100;i++){ 
lbl.push("this_is_my_lable_name_"+i); 
} 
for(var i = 1;i<=100;i++){ 
    dt.push(Math.floor((Math.random() * 100) + 1)); 
} 
var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: lbl, 
     datasets: [{ 
      label: '# of Votes', 
      data: dt, 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
}); 

Answer 1

次のようなグラフのスクロールを検討するために、このソリューションを試すことができます。

クローンのy軸の異なるキャンバスをするときになるようにスクロールするとバーのみが移動して表示されます

y軸のためのキャンバスを追加

<canvas id="myChartAxis" height="600" width="0"></canvas> 

次に、X軸とショーでより良い視覚化のために、より良い回避するラベルを、この FIDDLE

を参照してデモの軸

var sourceCanvas = myLiveChart.chart.canvas; 
var copyWidth = myLiveChart.scales['y-axis-0'].width - 10; 
var copyHeight = myLiveChart.scales['y-axis-0'].height + myLiveChart.scales['y-axis-0'].top + 10; 
var targetCtx = document.getElementById("myChartAxis").getContext("2d"); 
targetCtx.canvas.width = copyWidth; 
targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight); 

のクローニングこの情報は、ツールヒントを介して直感的にどのようにでも

Answer 2

です。チャートが画面全体を覆わないようにするには、別のラッパークラスでラップすることもできます。

var lbl = []; 
 
var dt = []; 
 
for (var i = 1; i <= 100; i++) { 
 
    lbl.push("this_is_my_lable_name_" + i); 
 
} 
 
for (var i = 1; i <= 100; i++) { 
 
    dt.push(Math.floor((Math.random() * 100) + 1)); 
 
} 
 
var ctx = document.getElementById("myChart"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
     labels: lbl, 
 
     datasets: [{ 
 
      label: '# of Votes', 
 
      data: dt, 
 
      backgroundColor: [ 
 
       'rgba(255, 99, 132, 0.2)', 
 
       'rgba(54, 162, 235, 0.2)', 
 
       'rgba(255, 206, 86, 0.2)', 
 
       'rgba(75, 192, 192, 0.2)', 
 
       'rgba(153, 102, 255, 0.2)', 
 
       'rgba(255, 159, 64, 0.2)' 
 
      ], 
 
      borderColor: [ 
 
       'rgba(255,99,132,1)', 
 
       'rgba(54, 162, 235, 1)', 
 
       'rgba(255, 206, 86, 1)', 
 
       'rgba(75, 192, 192, 1)', 
 
       'rgba(153, 102, 255, 1)', 
 
       'rgba(255, 159, 64, 1)' 
 
      ], 
 
      borderWidth: 1 
 
     }] 
 
    }, 
 
    options: { 
 
     scales: { 
 
      yAxes: [{ 
 
       ticks: { 
 
        beginAtZero: true 
 
       } 
 
      }] 
 
     } 
 
    } 
 
});

.wrapper { 
 
    width: 600px; 
 
    height: 400px; 
 
    overflow-x: scroll; 
 
} 
 
.chartWrapper { 
 
    width: 6000px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="chartWrapper"> 
 
     <canvas id="myChart" height="19"></canvas> 
 
    </div> 
 
</div>

_JSFiddle