*{ box-sizing: border-box; } body{ display: flex; justify-content: space-between; max-width: 800px; margin:0 auto; } body .box{ border: solid 1px #eee; padding: 20px; width:calc(100% / 3 - 20px); } .js_piechart{ position: relative; } .pie_chart{ transform:rotate(-90deg);/*頂点から始まるように調整*/ position: relative; z-index: 3; } .pie_chart circle{ fill:transparent;/*塗り*/ stroke-width:10;/*線の幅*/ stroke-linecap: round; } .pie_chart.bg{ position: absolute; left: 0; top: 0; z-index: 1; } .pie_chart.bg circle{ stroke: #eee; }

data-chartval="30"

data-chartval="60"

data-chartval="100"

jQuery(function($) { function circle() { var css, rules, value; // styleタグを作成 css = document.createElement('style'); css.media = 'screen'; css.type = 'text/css'; // 追加　ここから var e_width = $('.js_piechart').width(); var e_width_half = e_width / 2; var e_circle_width = e_width * 3.14; $('.pie_chart').attr({ width: e_width, height: e_width, }); $('circle').attr({ cx: e_width_half, cy: e_width_half, r: e_width_half - 5, }); // 追加　ここまで var i = 1; const list = document.querySelectorAll('.js_piechart'); var arrayList = [].slice.call(list); arrayList.forEach(function(val, index, array) { // パーセントの計算 var num = val.dataset.chartval * (e_circle_width / 100); value = '@keyframes circle' + i + '{' + [ '0%{stroke-dasharray:0 ' + e_circle_width + ';stroke: #1871ad}', '100%{stroke-dasharray:' + num + ' ' + e_circle_width + ' ;stroke: #1871ad}' ].join(' ') + '}'; // ルールをstyleタグに追加 rules = document.createTextNode([value].join('\n')); css.appendChild(rules); i++; }); // head内に作成 document.getElementsByTagName('head')[0].appendChild(css); } circle(); });
【javascript,css】svgで複数の円グラフアニメーション2
2020/03/26