スマートホンでグラフ表示が崩れる問題

スマートフォンでグラフが崩れて表示される場合、いくつかの理由が考えられます。以下の点を確認し、必要に応じて修正を行ってください。

### 1. **Canvasのサイズ設定**
要素の幅と高さを固定値（400px x 200px）に設定していますが、これがスマートフォンの画面サイズに対して適切でない場合があります。CSSで幅を100%に設定し、高さは自動で調整されるようにすることを検討してください。
html

$output = ‘‘;
### 2. **レスポンシブデザイン**
Chart.jsはデフォルトでレスポンシブです。 responsive: true を設定することで、キャンバスが親要素に合わせて自動的にサイズを調整するようになります。
javascript

options: {
responsive: true,
maintainAspectRatio: false, // アスペクト比を維持しない
scales: {
// …（そのまま）
}
}
### 3. **CSSの設定**
CSSで親要素のサイズを適切に設定することも重要です。以下のように、親要素のスタイルを設定して、子要素のサイズが正しく反映されるようにします。
css

#sensorDataChart {
width: 100%; /* 親要素に合わせる */
height: auto; /* 自動調整 */
}
### 4. **Viewport設定**
HTMLの 内にviewportメタタグを追加することで、スマートフォンでの表示を最適化できます。
html

### 5. **デバッグ**
スマートフォンでの表示崩れを確認するために、ブラウザの開発者ツールを使用して、実際のデバイスの画面サイズでどのように表示されるかを確認します。特に、CSSのスタイルやJavaScriptの動作を確認することが重要です。