chart.js棒グラフをスクロール可能にする方法

Question

chart.jsスクロール可能なチャートを作成する方法を知っている人はいませんか？ 私は、x軸にカテゴリのリストが非常に長い棒グラフを持っています。ブラウザのビューをモバイル画面に変更すると、x軸のラベルが相互に入り込み、異なるカテゴリを読み取ることが不可能になります。

私はグラフを水平方向にスクロール可能にすることでこれを解決する方法を模索しています。それは可能ですか？

Answer 1

私はこれをオンラインで見つけましたが、これはあなたのcharts.jsバージョンではうまくいきません。どちらですか？

How can I create a horizontal scrolling Chart.js line chart with a locked y axis?

幸運

Answer 2

ChartJsはaxisネイティブスクロールをサポートしていません。 ChartJsチャートは応答性が高く、親コンテナに従って幅を変更します。これを使用して大きな親コンテナを作成し、その内部にChartJsキャンバスを配置することができます。マークアップの少ないoverflow: autoプロパティは、望ましい結果をもたらすはずです。

参照デモ：http://jsfiddle.net/rbdqxfzL/140

HTML

<div class="chartWrapper"> 
    <div class="chartAreaWrapper"> 
    <canvas id="chart" height="400" width="15000"></canvas> 
    </div> 
</div> 

CSS

.chartWrapper { 
    position: relative; 
} 

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

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