• 文字サイズ
解決済

chart.jsのスマホサイズについて

  • 相談者:非公開
  • 2018/12/04 13:50
chart.jsを使ってチャートのページを作成しているのですが、
スマホサイズにした際に、左右に余白ができてしまい、小さくなってしまいます。

こちらはCssでは指定していなくjavascriptの中の構文が反映されていると思います。

URLなのですが、会員制のページになるためこちらに掲載することはできません。

ご教授お願いいたします。
投稿内容について報告する




  • 返信者:非公開
  • 2018/12/04 19:18
ECマスターズの田中です。

まずは、オプション内の layout → padding にて、
4辺全てに対して明示的に0をご指定いただき、
改善される………(省略)………
  • 返信者:非公開(質問者)
  • 2018/12/06 13:20
ありがとうございます。

上記のやり方ではなく、
width100%,height100%にしたところ、うまく行きました。
しかし画像のように各項………(省略)………
  • 返信者:非公開
  • 2018/12/06 14:07
ECマスターズの山岡です。

chart.jsはcanvasに描いているため、CSSでは変更は難しいです。

pointLabelsのfontsize指………(省略)………
  • 返信者:非公開(質問者)
  • 2018/12/06 17:32
ありがとうございます。
無事できました。
ちなみにグラフ(土台)の線の色を変える指定はどのようにやりますか?
調べても出てこなくて・・………(省略)………
  • 返信者:非公開
  • 2018/12/06 19:23
ECマスターズの塚本です。

いただいたご質問ですが担当より明日回答させていただきます。
回答まで今しばらくお待ちくださいませ。………(省略)………
  • 返信者:非公開
  • 2018/12/07 09:53
ECマスターズの山岡です。

datasets の strokeColor で線の色を変更できます。
ポイントのカラーなども変更できます。

例)
………(省略)………
  • 返信者:非公開(質問者)
  • 2018/12/07 11:11
ありがとうございます。

もう一点ですが、上記の3歳1ヶ月のデザインをスクリプト内で変更するにはどのようにやりますか?

できたらbackground-………(省略)………
  • 返信者:非公開
  • 2018/12/07 11:22
ECマスターズの山岡です。

公式のドキュメントによると
https://www.chartjs.org/docs/latest/configuratio………(省略)………
  • 返信者:非公開(質問者)
  • 2018/12/07 12:10
とても役にたちました!ありがとうございます。………(省略)………
  • 返信者:非公開(質問者)
  • 2018/12/07 12:55
申し訳ありません。
もう一点、教えて欲しいのですが
グラフとラベルの文字間隔が狭く、隙間を開けたいのですが
この場合のスクリプト内での間隔はどの指定すれば………(省略)………
  • 返信者:非公開
  • 2018/12/07 13:16
ECマスターズの山岡です。

paddingだと、ラベル同士の間隔の設定のようです。

公式サイトでもお調べしたのですが、チャートとの
グラフとラベル………(省略)………
  • 返信者:非公開
  • 2018/12/07 13:21
ECマスターズの山岡です。

もし項目が固定であれば、
chart.js では、非表示にして
html+cssで追加する方法ではいかがでしょうか?………(省略)………