Diskuse JPW: generování 100 svg na jedné stránce

	Autor	Zpráva
	unlucky Profil	#1 · Zasláno: 18. 3. 2024, 19:49:07 Odpovědět Citovat 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 Odpovědět Citovat 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: 2 roky

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

Odpovědět Citovat

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: 2 roky

Vaše odpověď

Mohlo by se hodit