〔Highcharts.js〕モバイルで図表をスクロールできるようにする方法

2018年2月18日2018年12月18日Java Script

Highcharts.js で表示させたグラフがモバイルで見にくい時は、レスポンシブの設定をすれば見やすくなります。
が、細かく設定するのは面倒。

そんな時はグラフをスクロールさせればOK。

chartオプションに「scrollablePlotArea」を加えて最小幅 minWidth を指定するだけで、それ以下の画面幅ではスクロールバーが表示されるようになります。

chart: {
type: 'spline',
scrollablePlotArea: {
minWidth: 700,//最小幅（ピクセル）
scrollPositionX: 0//グラフの開始位置
}
},

minWidth: 700 は最小幅指定と分かりますが、問題はscrollPositionX。

scrollPositionX の Higcharts の説明では、グラフの開始位置となっています。0から1の範囲を取り、0なら左端から、１なら右端（最新データ）が表示されるよう初期位置が調整されるということのようです。

説明通り動くとすれば、１にておけば読み込み時にグラフの右端が表示されるはずなのですが、試した範囲では scrollPositionX: 1 にしても左端から表示されています。

説明書きでは「Y軸の目盛りを右においた場合は、通常１とする」となっているので、目盛り位置が左だと意味がないのかも。

いずれにせよデスクトップだと画面サイズを縮めてもうまく表示されないことがあるため、確認は実際のスマホやタブレットで行う必要があります。