web-dev-qa-db-ja.com

チャートjsをレスポンシブにできない

問題を解決するために何かを見逃した場合は申し訳ありませんが、問題に適応せずに多くの解決策を読んで試しました。

1つのページに複数のグラフ（chart.jsから）がありますが、それらのグラフをレスポンシブにすることはできません。

responsive: true,

キャンバスの幅と高さを拡大したときの反応が最高でしたが、デスクトップバージョンでは画面全体にチャートが表示されました。

これは fiddle.net です

助けてくれる人はいますか？どうもありがとうございました。

javascriptchart.jsresponsive
11
Blue Agency

答えは：

1。キャンバスの周りにdivを追加

例えば ​​：

<div class="wrapper">
    <canvas width="600" height="250"></canvas>
</div>

2。CSSのdivクラスに高さを追加

.wrapper {
height: 500px !important;
}

（レスポンシブレンダリングを希望する高さに調整します）

9
Blue Agency

Bootstrapにはサンプルページがあり、このページにはレスポンシブなチャート（chartjsを使用）があります。したがって、ダウンロード可能なURLをポイントすると、レスポンシブチャートが作成されます。

レスポンシブチャートを示すダスボードの例

6
Krishna Vedula

私がフィドルで見たように、あなたはキャンバスタグに固定の高さと幅を与えました。

キャンバスタグの高さと幅の両方を70％または80％にするようにしてください。これで問題が解決する場合があります。

100％が完全に大きなチャートを提供する場合がありますが、70から80に制限するようにしてください。

4
Akash Thakkar

CSSを使用してコンテナdivをレスポンシブにし、svg width: 100%およびheight:100%

更新されたフィドル fiddle.net

2
Amit

私はこれが古い投稿であることを知っていますが、最近それに出会いました。

確認してください https://www.chartjs.org/docs/latest/general/responsive.html#important-note

基本的には、

  1. キャンバスのサイズが変更されたことを検出することは、キャンバス要素から直接行うことはできません。 Chart.jsは親コンテナを使用して、キャンバスのレンダリングと表示サイズを更新します。ただし、この方法では、コンテナを比較的配置し、チャートキャンバス専用にする必要があります。その後、コンテナサイズの相対値を設定することにより、応答性を実現できます。

  2. 上記のコードでチャートの高さを正しく変更するには、maintainAspectRatioオプションもfalseに設定する必要があることに注意してください。

例えば、

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>
2
Divya Tewari

同様の状況があり、 chartjsのドキュメント に基づいてresponsive: trueはoptionsセクションにありますが、問題は解決しませんでした！最後に、canvasの親要素がflexboxであることに気付きました！それを取り除くことで私の問題は解決しました！

P.S公式ドキュメントによると、キャンバスタグにスタイルまたは幅/高さの属性を追加することは無効です！以下はドキュメントの抜粋です

次の例は機能しません。

<canvas height="40vh" width="80vw">：値が無効です。キャンバスのサイズは変更されません（例）<canvas style="height:40vh; width:80vw">：無効な動作です。キャンバスのサイズは変更されますが、ぼやけます

私の答えが誰かを助けることを願っています！

1
Gh111

Chart.jsを使用すると、css（height/width）を操作するdivを含む必要があることがわかりました。これにより、応答性が向上しますが、完全ではありません。キャンバスはパーセンテージで含まれる幅に完全に調整されないため、含まれるdivの下部/側面に多くの空白が残る可能性があるため、特に幅にはいくつかの制約があります。完全ではありませんが、機能します。

そのため、解決策として、各チャートに含まれるdivを作成し、このdivのCSSスタイルを使用して配置します:)

0
cbll

メディアクエリを使用してwidthおよびheightを設定できないため、以下のようにモバイルまたはデスクトップを検出して幅と高さの属性を設定します

[〜＃〜] html [〜＃〜]

<canvas id="chart" width="{{width}}" height="{{height}}"></canvas>

javascript-angularjs

$scope.width = '';
$scope.height = '120';
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
   $scope.width = '100';
   $scope.height = '100';
}
0
Morteza QorbanAlizade

高さと幅の属性を指定する代わりに、スタイルで設定します。

の代わりに

<canvas id="myChart" width="400" height="100"></canvas>

これを行う

<canvas id="myChart" style="height: 20rem"></canvas>

0
vishalknishad