CSS と SVG_html/css_WEB-ITnose で円グラフを作成する

出典: lulux のブログ Bole Headlines への原文の共有へようこそ

CSS テクノロジーに関して言えば、Lea Verou ほど粘り強い人はいませんが、問題に対するさまざまな解決策を見つけるために熱心に取り組むのに十分賢い人はいません。最近、Lea は「CSS Secrets」という本を執筆、デザイン、出版しました。この本は非常に興味深いもので、一般的な問題を解決するための CSS のヒントとテクニックがいくつか含まれています。自分の CSS スキルがかなり優れていると思うなら、この本を読めば驚くでしょう。この投稿では、この本の一部の抜粋を掲載します。これらは、SmashingConf New York での Lea の最近の講演「CSS を使用したシンプルな円グラフの設計」でも紹介されました。ブラウザのサポートが限られているため、一部のデモは正しく実行されない場合があることに注意してください。 ??編集

円グラフ、2 色だけの最も単純なフォームであっても、Web テクノロジを使用して作成するのは簡単ではありません。ただし、それらはすべて、単純な統計から進行状況バー インジケーターまで、いくつかの共通の情報コンテンツを持っています。これは通常、外部画像エディタを使用して複数の値に対して複数の画像を作成するか、大規模な JavaScript フレームワークを使用してより複雑なグラフを設計することによって実現されます。

これはかつて思われていたほど達成するのは難しくありませんが、直接的で簡単な方法はありません。ただし、より優れた、より保守しやすい方法があります。

Transform ベースのソリューション

このソリューションは、HTML の観点から見ると最良です。必要な要素は 1 つだけで、他のすべては疑似要素、Transform、CSS グラデーションを使用して実行できます。この単純な要素から始めます:

1

ここで、20% スケールの円グラフを表示するとします。柔軟性の問題は後で解決します。まず要素にスタイルを追加して円にし、これが背景になります:

図 1: 最初のステップは、円 (または 0% の比率を示す円グラフ) を描画することです

CSS

.pie { 単純な線形グラデーションを使用して、右半分を茶色に着色します。

1 2 3 4 5

幅: 100px 高さ: 100px ; ; 境界半径: 50%; 背景: yellowgreen } 円グラフは緑 (特別な黄緑を指します) と茶色 (#655) ) パーセンテージで表示されます。比例部分の変換でスキューを使用してみるかもしれませんが、いくつかの実験の後、これは非常に混乱を招く解決策であることがわかりました。したがって、この円グラフの左側と右側の部分をこれら 2 色で色付けし、必要なパーセンテージに対して、回転した疑似要素を使用してそれを実現します。

1

背景 - 画像: 線形グラデーション(右へ、透明 50%、#655 0);

図 2: 単純な線形グラデーションを使用して、右側の半円を茶色に着色します

図 2 に示すように、これで完了です。ここで、疑似要素にスタイルを追加してマスクにします。

1

2

3

4

5

6

.pie::before {

content: '';

mar gin-left: 5 0%; 高さ: 100図 3: 点線内の内容は、疑似要素がマスクとして機能する領域を表します 図 3 で、疑似要素が現在円要素を基準にして配置されます。現在、スタイルは設定されておらず、何も覆われておらず、単なる透明な長方形です。スタイルの追加を始める前に、まずそれを分析しましょう: 円の茶色の部分をカバーしたいので、定義の繰り返しを避けるために、background-color: 継承を使用して緑色の背景を適用する必要があります。もともと欲しかったものです。親要素の背景色と一致しています。 疑似要素の左側にある円の中心点を中心に回転させたいので、その変換原点、または直接左に 0 50% を適用する必要があります。 円グラフの端を超えるため、長方形にはしたくないので、overflow: hidden to .pie を適用するか、適切な境界半径を適用して半円にする必要があります。 要約すると、疑似要素の CSS スタイルは次のとおりです。

CSS

1

2

3

4

5

6

7

8

9

.pie::before {

content: '';

表示: ブロック;

マージン左: 50%;

高さ: 100%;

境界線: 0 100% 100% 0 / 50%;

変換元: 左;

図 4: スタイルを追加した後の疑似要素 (ここでは点線で示されています)

注: 背景色: 継承; を使用しないでください。それ以外の場合は、親の背景画像のグラデーションを使用します。要素も継承されます

現在の円グラフは図 4 のようになります。さあ、楽しい時間が始まります！擬似要素にrotate() 変換を適用することで、擬似要素の回転を開始できます。 20% のスケールを表示するには、72 度 (0.2 x 360 = 72)、つまり 0.2 回転を与えると、より読みやすくなります。図 5 に、さまざまな回転角度値の結果を示します。

図 5: さまざまなパーセンテージを示す円グラフ、左から右へ: 10% (36 度または 0.1 回転)、20% (72 度または 0.2 回転)、40% (144 度または 0.4 回転)

これで終わりだと思いますが、それほど単純ではありません。この円グラフでは、0 ～ 50% のサイズのコンテンツを問題なく表示できますが、( .6turn を適用して) 60% の回転を表示したい場合は、図 6 の状況が発生します。でも心配しないでください。これは解決できます。

図 6: 比率が 50% を超えると、円グラフは横ばいになります (ここでは 60%)

50% ～ 100% の比率を別の問題として扱うと、次のような問題が発生する可能性があります。前のソリューションの逆バージョン: 0 から 0.5 回転の茶色の疑似要素。したがって、60% の円グラフの場合、疑似要素の CSS コードは次のようになります。

1

2

3

4

5

6

7

8

9

10

.pie::before {

コンテンツ: '';

表示: ブロック;マージン左: 50%;

高さ: 100%;

背景: #655;

変換フォーム:回転(.1turn );

図 7: 円グラフを開く 60% 正しい方法~

結果は図 7 で確認できます。任意のパーセンテージをプロットできるメソッドを開発したので、円グラフを 0% から 100% までアニメーション化して、楽しい進行状況バーを作成することもできます。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

@keyframes を {

に {transform: 回転(.5turn) } }

}

@keyframes bg {

50 % { 背景: #655; }

}

.pie::before {

表示: ブロック;

高さ: 100%;

境界半径: 0 100% 100% 0 / 50%;

背景色: 継承;

アニメーション: スピン 3 秒線形無限、

ステップ終了無限;

}

CodePenのAiren (@airen)によるPen zGbNLJを参照してください。

表示には問題ありませんが、パーセンテージの異なる複数の静的な円グラフを追加した場合、スタイルはどうなるでしょうか、最も一般的な使用例は何ですか?理想的には、次のように単純に入力できるようにしたいと考えています。 ;div class="パイ">20%

/div>

すると、2 つの円グラフが得られます。1 つは 20% を表し、もう 1 つは 60% を表します。まず、インライン スタイルを使用してそれを行う方法を学習しましょう。次に、テキスト コンテンツを解析する短いスクリプトを作成し、それに応じてインライン スタイルを追加して、コードをエレガントでカプセル化し、保守しやすくし、最も重要な点としてアクセシビリティを高めます。

インライン スタイルを使用して円グラフのパーセンテージを制御する場合の難点の 1 つは、パーセンテージを設定するための CSS コードが疑似要素で行われることです。ご存知のとおり、疑似要素をインラインでスタイル設定することはできないため、革新する必要があります。

注: 複雑な計算を繰り返すことなく、使用したい値が特定の範囲内にある場合は、アニメーションを段階的にデバッグするなど、同じ手法を使用できます。このテクニックの簡単な例を見てください。

CodePen の Airen (@airen) によるペン YXgNOK を参照してください

その解決策は、最も思いがけない場所から生まれました。すでに紹介したアニメーションを一時停止状態で使用します。通常のアニメーションのように実行する代わりに、負の遅延を使用して、特定の時点で静的に一時停止できるようにします。奇妙な？負のアニメーション遅延値は仕様で許可されているだけでなく、次のような場合にも非常に役立ちます:

負の遅延は有効です。 0 秒の遅延と同様に、アニメーションがすぐに実行されることを意味しますが、遅延の絶対値に基づいて自動的に実行されるため、アニメーションが指定された時間より前に実行を開始した場合は、アクティブなアニメーションから直接実行されます。時間。 。 ?CSS アニメーション レベル 1

アニメーションが一時停止されているため、最初のフレームが表示される唯一のフレームです (アニメーション遅延によって定義されます)。円グラフに表示されるパーセンテージは、アニメーション遅延の合計時間になります。たとえば、現在の継続時間は 6 秒で、アニメーション遅延の値は -1.2 秒で、20% の割合を表示します。計算を簡素化するために、期間を 100 秒に設定します。アニメーションは永久に一時停止されるため、それに割り当てた遅延サイズは効果がないことに注意してください。

最後に問題が 1 つあります。アニメーションは擬似要素に割り当てられていますが、.pie 要素のインライン スタイルを設定したいと考えています。

にはアニメーションがないため、アニメーション遅延をインライン スタイルとして設定し、疑似要素にアニメーション遅延を適用します。要約すると、20% と 60% の円グラフの HTML コードは次のとおりです。

提案したばかりのアニメーションの CSS コードは次のとおりです (.pie ルールは変更がないため省略されています):

CSS

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@キーフレーム スピン { to { 変換: 回転(.5turn); } } @keyframes bg { 50% { 背景: #655; } } .pie::前{ /* [残りのスタイルは同じままです] */ アニメーション: 50 秒のリニア無限、バック 100 秒のステップ終了無限この時点で、当初の希望どおり、コンテンツとしてパーセンテージを使用するように HTML タグを変更し、簡単なスクリプトを通じてアニメーション遅延インライン スタイルをそれに追加できます。

1

2

3

4

$$('.pie')。 forEach(function(pie) {

var p = parseFloat(pie.textContent);

pie.style.animationDelay = '-' + p + 's';

});

図 8: 隠しテキストの前の図

円グラフの高さを line-height に変換します (または、高さの値と等しい line-height を追加しますが、この値は無意味な繰り返しコードです。高さの値が自動的に計算されます)。

テキストが埋もれないように、絶対配置によって疑似要素のサイズと位置を設定します。

text-align: center; を追加して、テキストを水平方向に中央揃えにします。

最終的なコードは次のとおりです:

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

.pie {

位置: 相対;

幅: 100px; ;

境界線: 50%;

背景: yellowgreen;

色: 透明;中央;

}

@keyframes スピン {

to { 変換: 回転(.5turn); }

}

@keyframes bg {

50% { 背景: #655; }

}

B .pie :: beface {

位置: 絶対;

幅: 100%; / 50%;

背景色: 継承;

変形原点: 左;

アニメーション再生状態: 一時停止;遅延:

}

CodePen の Airen (@airen) による Pen qdvRMv を参照してください。

SVG ベースのソリューション

SVG を使用すると、多くのグラフィック タスクが簡単になり、円グラフも例外ではありません。ただし、パスを使用して円グラフを作成するには、複雑な数学的計算が必要になります。代わりに、ちょっとしたトリックを使用できます。

サークルから始めます:

1 2 3

CSS

1

2

3

4

5

サークル {

塗りつぶし: yellowgreen ストローク; : #655; ストローク幅: 30; }

注: 移植性を考慮する場合、これらの CSS プロパティは SVG 要素の属性としても使用できます。入っていたら便利かも。 画像 9: 太い #655 ストロークを持つ緑色の SVG 円から始めます 図 9 で描いたストロークの円を確認できます。 SVG ストロークには、ストロークとストローク幅の属性だけではありません。ストロークの微調整に使用できる、あまり一般的ではないストローク関連のプロパティも多数あります。そのうちの 1 つは、点線のストロークを作成するために使用される ストローク-ダシャーレイ です。たとえば、以下を使用できます:

CSS

1

ストローク ダシャレー: 20

;

図 10: ストローク-dasharray 属性によって作成された単純な点線のストローク

このコード行が意味するのは、次に示すように、点線の長さが 20 プラスマージン 10 であるということです。図10。ここで、この SVG ストローク属性と円グラフの間にどのような関係があるのか​​知りたいかもしれません。ストロークにダッシュ幅 0 を適用し、現在の円の円周以上のマージンを適用すると、より明確になる可能性があります (円周の計算: C = 2πr 、つまりここでは C = 2π × 30 ≈ 189)。

CSS

1

ストローク-ダシャレー: 0 189;

図 11: さまざまなストローク ダシャ配列値に対応する効果: 左から右へ: 0 189; 40 189; 150 189

図 11 の最初の円に示すように、そのストロークのエッジが削除され、緑色の円だけが残ります。しかし、最初の値を増やし始めると、興味深いことが起こります (図 11)。マージンが長すぎるため、破線のストロークはなく、指定した長さのパーセンテージの円の円周を覆うストロークだけになります。

あなたは何が起こっているのか理解し始めたかもしれません: 円の半径をある程度まで小さくすると、そのストロークによって完全に覆われ、非常に円グラフのようなものになります。たとえば、図 12 に示すように、半径 25 とストローク幅 50 を適用すると、次のようになります。

図 12: SVG 画像は円グラフのように見え始めます (∩_. ∩)O

覚えておいてください: SVG ストロークは常に、要素の端に対して半分が内側、半分が外側 (中央) になります。将来的には、この動作を制御できるようになるはずです。

1

1 2 3 4 5 6 7 8 9 10

サークル { 塗りつぶし: yellowgreen; ストローク: #655; ストローク-幅: 60 158; /* 2π × 25 ≈ 158 */ } さあ、入れてください前のソリューションで作成した円グラフのようなものに変換するのは非常に簡単です。ストロークの下に大きな緑色の円を追加し、開始点が上中央になるように反時計回りに 90 度回転するだけです。

2

3

4

5

svg {

変換: 回転 (-90 度)

背景: 黄緑色;

境界半径: 50%;

}

図 13: 最終的な SVG 円グラフ

図 13 で最終結果を確認できます。この手法を使用すると、円グラフを 0% から 100% まで簡単にアニメーション化できます。ストローク ダシャ配列を 0 158 から 158 158 に変更する CSS アニメーションを作成する必要があります。

1

2

3

4

5

6

7

8 1

9 10 11 @keyframes fillup { to { ストローク-dasharray: 158 158 } } サークル { 塗りつぶし: yellowgreen; ストローク: #655; ストローク-幅: 0 158;

アニメーション: フィルアップ 5 秒線形無限 } 追加の改善として、円周が限りなく 100 に近づくように円の特定の半径を指定できるようになり、ストローク ダシャー配列の長さをパーセンテージで指定できます。計算を行う。円周は 2πr であるため、半径は 100 ÷ 2π ≈ 15.915494309 となり、ほぼ 16 に等しくなります。 viewBox 属性を使用して SVG のサイズを指定することもできます。これにより、width 属性と height 属性を使用せずにコンテナのサイズに自動的に調整できます。 上記の調整後、図 13 の円グラフの HTML タグは次のようになります:

2

3

CSS如下：

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13

svg { 幅: 100ピクセル。高さ: 100ピクセル; 変換: 回転(-90度); 背景: 黄緑; 境界半径: 50%; } サークル { fill: yellowgreen; ストローク: #655; ストローク幅: 32; ストローク-ダシャレー: 38 100; /* for 38% */ }

注意现在百分率すでに都合よく変更可能です。それぞれの饼図の時候都繰り返しこれらの SVG ポリシーをすべて一周します。これは、JavaScript を出力して、私を完全に理解するときです。

1

2

20% 60%

次に、必要なすべての要素と属性を含むインライン SVG を各 .pie 要素内に追加します。また、アクセシビリティを高めるために