jsで円グラフを複数個表示したい

https://codepen.io/shankarcabus/pen/GzAfb
こちらのサイトを参考に、別の内容を表示するグラフを複数個表示しようと、

js
1window.onload = function(){
2    var $ppc = $('.progress-pie-chart'),
3    percent = parseInt($ppc.data('percent')),
4    deg = 360*percent/100;
5    if (percent > 50) {
6        $ppc.addClass('gt-50');
7    }
8    $('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
9    $('.ppc-percents span').html(percent+'%');
10};
11
12window.onload = function(){
13    var $ppc_1 = $('.progress-pie-chart_1'),
14    percent_1 = parseInt($ppc_1.data('percent_1')),
15    deg_1 = 360*percent_1/100;
16    if (percent_1 > 50) {
17        $ppc_1.addClass('gt-50_1');
18    }
19    $('.ppc-progress-fill_1').css('transform','rotate('+ deg_1 +'deg)');
20    $('.ppc-percents_1 span').html(percent_1+'%');
21};

html
1<div class="progress-pie-chart" data-percent="80">
2									<div class="ppc-progress">
3										<div class="ppc-progress-fill"></div>
4									</div>
5									<div class="ppc-percents">
6										<div class="pcc-percents-wrapper">
7											<span>%</span>
8										</div>
9									</div>
10								</div>
11
12<div class="progress-pie-chart_1" data-percent_1="43">
13									<div class="ppc-progress_1">
14										<div class="ppc-progress-fill_1"></div>
15									</div>
16									<div class="ppc-percents_1">
17										<div class="pcc-percents-wrapper_1">
18											<span>%</span>
19										</div>
20									</div>
21								</div>

scss
1@mixin circle($size) {
2    content: "";
3    position: absolute;
4    border-radius: 50%;
5    left: calc(50% - #{$size/2});
6    top: calc(50% - #{$size/2});
7    width: $size;
8    height: $size;
9  }
10  
11  $size: 200px;
12  .progress-pie-chart {
13    width: $size;
14    height: $size;
15    border-radius: 50%;
16    background-color: #E5E5E5;
17    position: relative;
18    &.gt-50 {
19      background-color: #81CE97;
20    }
21  }
22  .ppc-progress {
23    @include circle($size);
24    clip: rect(0, $size, $size, #{$size/2});
25    .ppc-progress-fill {
26      @include circle($size);
27      clip: rect(0, #{$size/2}, $size, 0);
28      background: #81CE97;
29      transform: rotate(60deg);
30    }
31    .gt-50 & {
32      clip: rect(0, #{$size/2}, $size, 0);
33      .ppc-progress-fill {
34        clip: rect(0, $size, $size, #{$size/2});
35        background: #E5E5E5;
36      }
37    }
38  }
39  .ppc-percents {
40    @include circle(#{$size/1.15});
41    background: #fff;
42    text-align: center;
43    display: table;
44    span {
45      display: block;
46      font-size: 2.6em;
47      font-weight: bold;
48      color: #81CE97;
49    }
50  }
51  .pcc-percents-wrapper {
52    display: table-cell;
53    vertical-align: middle;
54  }
55  
56  
57  
58  body {
59    font-family: Arial;
60    background: #f7f7f7;
61  }
62  .progress-pie-chart {
63    margin: 50px auto 0;
64  }
65
66
67
68
69
70  @mixin circle1($size) {
71    content: "";
72    position: absolute;
73    border-radius: 50%;
74    left: calc(50% - #{$size/2});
75    top: calc(50% - #{$size/2});
76    width: $size;
77    height: $size;
78  }
79  
80  $size: 200px;
81  .progress-pie-chart_1 {
82    width: $size;
83    height: $size;
84    border-radius: 50%;
85    background-color: #E5E5E5;
86    position: relative;
87    &.gt-50_1 {
88      background-color: #81CE97;
89    }
90  }
91  .ppc-progress_1 {
92    @include circle1($size);
93    clip: rect(0, $size, $size, #{$size/2});
94    .ppc-progress-fill_1 {
95      @include circle1($size);
96      clip: rect(0, #{$size/2}, $size, 0);
97      background: #81CE97;
98      transform: rotate(60deg);
99    }
100    .gt-50_1 & {
101      clip: rect(0, #{$size/2}, $size, 0);
102      .ppc-progress-fill {
103        clip: rect(0, $size, $size, #{$size/2});
104        background: #E5E5E5;
105      }
106    }
107  }
108  .ppc-percents_1 {
109    @include circle1(#{$size/1.15});
110    background: #fff;
111    text-align: center;
112    display: table;
113    span {
114      display: block;
115      font-size: 2.6em;
116      font-weight: bold;
117      color: #81CE97;
118    }
119  }
120  .pcc-percents-wrapper_1 {
121    display: table-cell;
122    vertical-align: middle;
123  }
124  
125  
126  
127  body {
128    font-family: Arial;
129    background: #f7f7f7;
130  }
131  .progress-pie-chart_1 {
132    margin: 50px auto 0;
133  }

上記のように2つ目を書き換えて実装したのですが、1つ目が表示されなくなってしまいました。

2つ目を削除すると、１つ目がしっかりと表示されるので、２つ目の書き換え方が悪いことまではわかったのですが、どこが影響を及ぼしているのかわからず困っています。

退会済みユーザー

2020/04/22 07:48

jquery つかってるのになぜ jquery でイベント登録してないのか？

行動規範の内容に同意します

回答1件

ベストアンサー

js
1window.onload = function(){
2    var $ppc = $('.progress-pie-chart'),
3    percent = parseInt($ppc.data('percent')),
4    deg = 360*percent/100;
5    if (percent > 50) {
6        $ppc.addClass('gt-50');
7    }
8    $('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
9    $('.ppc-percents span').html(percent+'%');
10/*
11};
12
13window.onload = function(){
14*/
15    var $ppc_1 = $('.progress-pie-chart_1'),
16    percent_1 = parseInt($ppc_1.data('percent_1')),
17    deg_1 = 360*percent_1/100;
18    if (percent_1 > 50) {
19        $ppc_1.addClass('gt-50_1');
20    }
21    $('.ppc-progress-fill_1').css('transform','rotate('+ deg_1 +'deg)');
22    $('.ppc-percents_1 span').html(percent_1+'%');
23};