Question

我正在使用Lea Verou的polyfill用css圆锥渐变制作交互式饼图，它会在初始页面加载时显示饼图，但是当您更改输入中的任何值时，饼图将变为空白，而仅显示空白圈。我猜测当oninput事件触发时，polyfill javascript文件没有被重新触发。

calcz.oninput = function() { 
var colors = ['red','orange','yellow','lime','aqua', 'violet'];
var gradient = []; var values = []; 
var percents = [0]; var n = 0; var o = 0;
var lengthz = document.forms.calcz.length;
var totalz = 0;
for(var z = 0; z < lengthz-1; z++)
{
totalz += parseFloat(document.forms.calcz[z].value); 
values.push(document.forms.calcz[z].value);
}    

for (var zz = 0; zz < lengthz-1; zz++)
{
percents.push(document.forms.calcz[zz].value/totalz*100);
n += percents[zz]; 
o += percents[zz+1];
gradient.push(colors[zz] + ' ' + n.toFixed(2)+'% ' + o.toFixed(2)+'% ');
}

result.value = totalz;
var h = document.getElementById("piechart");
h.setAttribute('style', 'background:conic-gradient('+gradient+')');
};
calcz.oninput();

input[type=number] { width:80px; } 
output {font-weight:bold;} 
#piechart { float:left; width:200px; height:200px; border-radius:50% 50%; border:1px solid black; background-repeat: no-repeat; margin-top:15px; }

<html>
<head>
<meta charset="UTF-8">
<title>Interactive Pie Chart</title>
  
</head>
<body>
<form id="calcz">
<div style="float:left; width:50%">
1. <input type="number" value="6000"><br>
2. <input type="number" value="240"><br>
3. <input type="number" value="1440"><br>
4. <input type="number" value="240"><br>
5. <input type="number" value="600"><br> 
6. <input type="number" value="1200"></div>

<div id="piechart"></div> 
<output id="result"></output></form>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<script src='https://leaverou.github.io/conic-gradient/conic-gradient.js'></script>
</body>
</html>

Answer 1

嗯，我首先要确保可以进行圆锥渐变工作：

#thing {
  background: conic-gradient(#f06, gold);
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="conic-gradient.js"></script>


<div id="thing">
thing here...
</div>

使用您的代码，第一次加载时根本看不到渐变，但是当我更改此行时可以看到：

h.setAttribute（'style'，'background：conic-gradient（＃f06，gold）;'）

例如：

calcz.oninput = function() {
console.log('calling function.....')
var colors = ['red','orange','yellow','lime','aqua', 'violet'];
var gradient = []; var values = []; 
var percents = [0]; var n = 0; var o = 0;
var lengthz = document.forms.calcz.length;
var totalz = 0;
for(var z = 0; z < lengthz-1; z++)
{
totalz += parseFloat(document.forms.calcz[z].value); 
values.push(document.forms.calcz[z].value);
}    

for (var zz = 0; zz < lengthz-1; zz++)
{
percents.push(document.forms.calcz[zz].value/totalz*100);
n += percents[zz]; 
o += percents[zz+1];
gradient.push(colors[zz] + ' ' + n.toFixed(2)+'% ' + o.toFixed(2)+'% ');
}
console.warn('gradient here is: ', gradient)

result.value = totalz;
var h = document.getElementById("piechart");
/* h.setAttribute('style', 'background:conic-gradient('+gradient+')') */;
h.setAttribute('style', 'background: conic-gradient(#f06, gold);')
};
calcz.oninput();

    input[type=number] { width:80px; } 
    output {font-weight:bold;} 
    #piechart { 
    float:left; 
    width:200px; 
    height:200px; 
    border-radius:50% 50%; 
    border:1px solid black; 
    background-repeat: 
    no-repeat; margin-top:15px; 
    }

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Interactive Pie Chart</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="conic-gradient.js"></script>

    </head>
    <body>
    <form id="calcz">
    <div style="float:left; width:50%">
    1. <input type="number" value="6000"><br>
    2. <input type="number" value="240"><br>
    3. <input type="number" value="1440"><br>
    4. <input type="number" value="240"><br>
    5. <input type="number" value="600"><br> 
    6. <input type="number" value="1200"></div>

    <div id="piechart"></div> 
    <output id="result"></output></form>
    </body>
    </html>

请注意，首次运行脚本时，gradient变量是一个看起来像这样的数组：["red 0.00% 61.73% ", "orange 61.73% 64.20% ", "yellow 64.20% 79.01% ", "lime 79.01% 81.48% ", "aqua 81.48% 87.65% ", "violet 87.65% 100.00% "]

Answer 2

我不知道如何重新加载polyfill脚本，但是我确实得到了一个有效的交互式饼图，该饼图通过使用SVG生成切片来响应oninput事件。

https://codepen.io/captlid/pen/wROWKj

圆必须为16半径。数学计算得出，笔划-破折号数组可以说为“ 20 100”，即20％，然后为破折号偏移量添加百分比+上一个百分比。描边宽度和svg视图框应为32。

<svg viewBox="0 0 32 32">

<circle cx="50%" cy="50%" r="16" stroke="pink" stroke-dasharray="10 100" stroke-dashoffset="0"></circle>
<circle cx="50%" cy="50%" r="16" stroke="aqua" stroke-dasharray="55 100" stroke-dashoffset="-10"></circle>
<circle cx="50%" cy="50%" r="16" stroke="lime" stroke-dasharray="20 100" stroke-dashoffset="-65"></circle>
<circle cx="50%" cy="50%" r="16" stroke="orange" stroke-dasharray="20 100" stroke-dashoffset="-85"></circle>

</svg>
svg { width:200px; height:200px; border-radius:50%; }
circle {fill:transparent; stroke-width:32;}

在触发oninput事件后重新加载javascript文件

2 个答案: