Перезагрузить файл JavaScript после запуска события oninput - PullRequest
Новая
       6

Перезагрузить файл JavaScript после запуска события oninput

0 голосов
/ 26 сентября 2018

Я делаю интерактивную круговую диаграмму с коническими градиентами CSS, используя polyfill Lea Verou. Она отображает круговую диаграмму при начальной загрузке страницы, но при изменении любых значений на входе круговая диаграмма становится пустой и отображается толькопустой круг.Я предполагаю, что javascript-файл polyfill не запускается повторно при возникновении события oninput. 

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>

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Я не мог понять, как перезагрузить скрипт polyfill, но я получил рабочую интерактивную круговую диаграмму, которая реагирует на событие oninput, работающее путем генерации слайсов с помощью SVG.

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

Круг должен быть 16 радиуса.Математика выясняет, что для штриха-черты можно сказать «20 100», что составляет 20%, а затем для смещения приборной панели вы добавляете процент + предыдущий процент.Ширина хода и svg viewbox должна быть 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;}
0 голосов
/ 26 сентября 2018

Хм, я сначала проверяю, могу ли я заставить работать этот конический градиент: 

#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 ('стиль', 'фон: конический градиент (# f06, золото);')

Пример: 

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% "]

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...