### 前提・実現したいこと javascriptとcssを使って円グラフを作っているのですが、 100%超えたときの挙動が思うようにいかず困っています。イメージは、画像のような感じです。 100%を超えた場合、その超えた分のみ色を濃くして残りの色を100%以下で色付けしている色にしたいです。 200%を超えたときは100%を超えたときと同じ挙動にしたいです。 20% ![イメージ説明](d175943027971413ccefaaa89e51a6f5.png) 120% ![イメージ説明](fb5ad90885a1d46fafad6b79ca4d7827.png) 50%を超えた時点でjavascriptで分岐しているみたいなのですが、仕組みが分からず自力では解決できませんでした。書き方が分かる方、教えていただきたいです。よろしくお願いします。 ### 該当のソースコード ```HTML

``` ```css @mixin circle($size) { content: ""; position: absolute; border-radius: 50%; left: calc(50% - #{$size/2}); top: calc(50% - #{$size/2}); width: $size; height: $size; } $size: 200px; .progress-pie-chart { width: $size; height: $size; border-radius: 50%; background-color: #E5E5E5; position: relative; &.gt-50 { background-color: #81CE97; } } .ppc-progress { @include circle($size); clip: rect(0, $size, $size, #{$size/2}); .ppc-progress-fill { @include circle($size); clip: rect(0, #{$size/2}, $size, 0); background: #81CE97; transform: rotate(60deg); } .gt-50 & { clip: rect(0, #{$size/2}, $size, 0); .ppc-progress-fill { clip: rect(0, $size, $size, #{$size/2}); background: #E5E5E5; } } } .ppc-percents { @include circle(#{$size/1.15}); background: #fff; text-align: center; display: table; span { display: block; font-size: 2.6em; font-weight: bold; color: #81CE97; } } .pcc-percents-wrapper { display: table-cell; vertical-align: middle; } body { font-family: Arial; background: #f7f7f7; } .progress-pie-chart { margin: 50px auto 0; } ``` ```javascript $(function(){ var $ppc = $('.progress-pie-chart'), percent = parseInt($ppc.data('percent')), deg = 360*percent/100; if (percent > 50) { $ppc.addClass('gt-50'); } $('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)'); $('.ppc-percents span').html(percent+'%'); }); ``` ### 試したこと javascriptに%が100以上の場合の分岐点を書いてみましたがおかしなことになってしまい断念しました。 ### 補足情報（FW/ツールのバージョンなど）初心者で至らない点があると思いますがよろしくお願いします。

	@@ -1,1 +1,1 @@
1	- css ~~jacascript~~ 円グラフ100%超えたときの挙動を変えたい
1	+ css javascript 円グラフ 100%超えたときの挙動を変えたい

質問編集履歴