| Autor | Zpráva | ||
|---|---|---|---|
| unlucky Profil |
#1 · Zasláno: 18. 3. 2024, 19:49:07
mám kód, který generuje jednoduchý graf ve tvaru kruhu. Na stránce mám 100 čísel a tato čísla chci převést do grafické podoby. Nevím ale, jak moc to bude mít dopad na hosting. Existuje lepší / lehčí řešení?
<span class="mkCharts" data-text="txt" data-percent="40"></span>
<style>
.mkc_circle { animation: mck_progress 1000ms ease-in-out; }
@keyframes mck_progress { 0% { stroke-dasharray: 0, 100; }}
</style>
<script>
function createCircleChart(text, percent) {
let svg = `<svg class="mkc_circle-chart" viewbox="0 0 36 36" width="70" height="70" xmlns="http://www.w3.org/2000/svg">
<path class="mkc_circle-bg" stroke="#eeeeee" stroke-width="2" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"/>
<path class="mkc_circle" stroke="blue" stroke-width="2" stroke-dasharray="${percent},100" stroke-linecap="round" fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text class="mkc_info" x="50%" y="50%" alignment-baseline="central" text-anchor="middle" font-size="8">${text}</text>
</svg>`;
return svg;
}
let charts = document.getElementsByClassName('mkCharts');
for(let i=0;i<charts.length;i++) {
let chart = charts[i];
let text = chart.dataset.text;
let percent = chart.dataset.percent;
charts[i].innerHTML = createCircleChart(text, percent);
}
</script> |
||
| Keeehi Profil |
#2 · Zasláno: 18. 3. 2024, 21:18:01
unlucky:
Na hosting to bude mít nulový efekt. Dopoad to má jen na prohlížeč uživatele, jelikož javascript běží v něm a o vykreslování svg se taky stará prohlížeč. |
||
|
Časová prodleva: 1 měsíc
|
|||
0