Question

您好我正在使用Material Design Lite Pie Chart。

以下是代码：

<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
   <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#piechart" mask="url(#piemask)"></use>
   <text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">
      82
      <tspan font-size="0.2" dy="-0.07">%</tspan>
   </text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;">
   <defs>
      <mask id="piemask" maskContentUnits="objectBoundingBox">
         <circle cx="0.5" cy="0.5" r="0.49" fill="white"></circle>
         <circle cx="0.5" cy="0.5" r="0.40" fill="black"></circle>
      </mask>
      <g id="piechart">
         <circle cx="0.5" cy="0.5" r="0.5"></circle>
         <path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)"></path>
      </g>
   </defs>
</svg>

我怎样才能使这个动态我的意思是如果我添加100个标签它应该填充100％圈..

Answer 1

你必须自己编码。我使用了SVG Path（https://www.w3schools.com/graphics/svg_path.asp）并用窦和余弦计算了这些点。这并不容易，但没有图书馆或工具可以做得更容易。

我的代码生成参数＆＃34; d＆＃34;：

if (percent > 50 && percent <= 99) {
    if (bool_main_circle) {
        return "M100,50  A50,50 0 1,0 " + x + "," + y;
    } else {
        return "M100,50  A50,50 0 0,1 " + x + "," + y;
    }
} else if (percent <= 50 && percent >= 1) {
    if (bool_main_circle) {
        return "M100,50  A50,50 0 0,0 " + x + "," + y;
    } else {
        return "M100,50  A50,50 0 1,1 " + x + "," + y;
    }
} else if (percent == 100) {
    if (bool_main_circle) {
        return "M50,100a50,50 0 1,0 100,0a50,50 0 1,0 -100,0";
    } else {
        return "";
    }
} else if (percent === 0) {
    if (bool_main_circle) {
        return "";
    } else {
        return "M50,100a50,50 0 1,0 100,0a50,50 0 1,0 -100,0";
    }
} else {
    console.log("Only values up to 100 percent are possible!");
}

正如我所说，你需要用窦和余弦来计算x和y值。（https://de.serlo.org/mathe/geometrie/sinus-kosinus-tangens/sinus-kosinus-tangens-einheitskreis/trigonometrie-einheitskreis）抱歉这个德语页面，但当你点击＆＃34; Veranschaulichung an einem Applet＆＃34;它有一个非常好的小程序，它显示了非常好的如何计算窦点。然后，您只需计算百分比值的度数值（度=百分比* 3.6）。

材料设计精简饼图动态

1 个答案: