Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html”>
<meta charset=”utf-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no” />
  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
​
  <title>饼图曲线文字</title>
</head>
<body>
​
       <div class="container-pie">
           <div class="container">
           <div class="outbox outbox1">
​
            <!–饼图–>
           <div class="pie">53.8%
           </div>
​
            <!–饼图内文字，tspan内的百分比根据实际百分比手动修改–>
            <div>
                <svg xmlns="http://www.w3.org/2000/svg">
                  <defs>
                      <path id="myTextPath"
                            d="M-4,101
                               a1,1 0 0,1 166,0
                             "
                              />
                  </defs>
                  <defs>
                      <path id="myTextPath2"
                            d="M-3,40
                               a1,1 0 0,0 160,0
                             "
                              />
                  </defs>
​
                  <text  y="100" style="text-anchor:start;font-size: 12px; fill:white;word-spacing: 0.5px;">
                    <textPath xlink:href="#myTextPath" >
                         <tspan x="100">城镇人口</tspan>
                         <tspan x="110" dy="15">53.8%</tspan>
​
                    </textPath>
                    <textPath xlink:href="#myTextPath2" >
                         <tspan x="100">乡村人口</tspan>
                         <tspan x="110" dy="15">46.2%</tspan>
​
                    </textPath>
                  </text>
                </svg>
            </div>
​
            <div class="center-txt">
               <div>
​
                <span class="orangefont">A城总人口</span>
               </div>
            </div>
       </div>
        </div>
           <div class="container">
  <div class="outbox outbox2">
​
            <!–饼图–>
           <div class="pie">34.56%
           </div>
​
            <!–饼图内文字，tspan内的百分比根据实际百分比手动修改–>
            <div>
                <svg xmlns="http://www.w3.org/2000/svg">
                  <defs>
                      <path id="myTextPath"
                            d="M-4,101
                               a1,1 0 0,1 166,0
                             "
                              />
                  </defs>
​
                  <text  y="100" style="text-anchor:start;font-size: 12px; fill:white;letter-spacing: 0.5px;">
                    <textPath xlink:href="#myTextPath" >
                         <tspan x="100">鲜果类占比</tspan>
                         <tspan x="110" dy="15">34.56%</tspan>
​
                    </textPath>
                  </text>
                </svg>
            </div>
​
            <div class="center-txt">
               <div>
                <span>市场农副产品消费总额</span>
               </div>
            </div>
       </div>
        </div>
       </div>
​
</body>
</html>
 
function $$(selector, context) {
            context = context || document;
            var elements = context.querySelectorAll(selector);
            return Array.prototype.slice.call(elements);
        }
 
        $$('.pie').forEach(function(pie) {
            var p = pie.textContent;
            var pf = parseFloat(p) / 100;
            var pr = pf * 360 / 2;
            console.log(pr);
            pie.style.transform = "rotateZ(-" + pr +"deg)";
            pie.style.animationDelay = '-' + parseFloat(p) + 's';
 
            pie.textContent = "";
 
        });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Dushusirpro
0viewers