javascriptとcssで作成した円グラフのアニメーションを
画面のサイズに合わせて、追従して縮小したいのですが、
良い方法はありますでしょうか?
教えていただけると幸いです。
情報不足で、申し訳ありませんでした。
以下に追記致します。
初心者でご迷惑おかけします。
過不足ありましたらご指摘ください、宜しくお願い致します。
javacsriptは以下のページを参考にさせていただきました。
長くて入りきらず、リンクにさせていただきます。
css
1@charset "UTF-8"; 2/* CSS Document */ 3 4/*グラフのアニメーション設定*/ 5 6.doughnutChart { 7 position: absolute; 8 width: 50%; 9 margin-left: auto; 10 margin-right: auto; 11} 12 13.effect { 14 margin-left: auto; 15 margin-right: auto; 16 width: 50%; 17} 18 19.doughnutSummary { /*数字の書式1*/ 20 position: absolute; 21 top: 30%; /*文字位置Y*/ 22 left: 50%; /*文字位置X*/ 23 color: #037200; /*文字色*/ 24 text-align: center; 25 text-shadow: 0 0px 0 #111; 26 } 27 28.doughnutSummaryTitle { /*trucksの書式*/ 29 position: absolute; 30 top: 130%; 31 width: 100%; 32 margin-top: -20%; 33 font-size: 200%; 34 letter-spacing: .06em; 35 color: #008F39; 36 font-family: Arial, Helvetica, "sans-serif"; 37} 38.doughnutSummaryNumber { /*数字の書式2*/ 39 position: absolute; 40 top: 50%; 41 width: 100%; 42 margin-top: 15%; 43 font-size: 800%; 44 font-family: Arial, Helvetica, "sans-serif"; 45}
あなたの回答
tips
プレビュー