Diskuze: Django - grafy a javascript

Naučíme tě pracovat na home-office.

Zjistit více...

Aktivity

Michal

Člen

Michal:3.2.2021 16:02

Čauko,
potreboval by som poradiť ako pracovať s javascriptom v djangu a to konkrétne s grafmi.
funckia pre graf :

fig = plt.figure()
plt.plot(draw_X,draw_Y)
plt.title("On surface movement")
plt.xlabel("x")
plt.ylabel("y")
imgdata = StringIO()
fig.savefig(imgdata, format='svg')
imgdata.seek(0)
data = imgdata.getvalue()
return data

views.py

graph = graph_on_surf_one_segment(result)
graph_2 = graph_on_surf_one_segment(result_zero)
return render(request, "segments_to_download.html", {"result":result,"graph":graph,"graph_2":graph_2})

Takto posielam graf do html, kde sa mi pekne zobrazí, lenže potreboval by som mať zobrazený len jeden graf, a pod ním mať button, ktorý mi bude prepínať medzi týmito dvoma grafmi, ak je zobrazený 1. graf po kliknutí sa zobrazí druhý. V podstate jednoduchá vec, čo mi ale nejde je nejako nahrať grafy do premenných a následne ich porovnať. Je to vôbec možné dosiahnuť to takouto formou ?

Zkusil jsem: Pozeral som mnoho vecí, ale problém podobný tomu som nenašiel. Ak sa snažím nahrať do premennej var a ={{graph}} tak mi to vyhadzuje chybu, u premmenej result to problém nerobí.

Odpovědět

3.2.2021 16:02

Pavel

Člen

Pavel:8.2.2021 10:08

A neni lepsi si v djangu zpracovat data a pak si je poslat do templatu a tam si je vykresilt nejakou js knihovnou jako treba chart.js.

Nahoru Odpovědět

8.2.2021 10:08

Michal

Člen

Michal:8.2.2021 12:04

Tak práveže so žiadnou takouto knižnicou nemám skúsenosti a takto si posielam tie grafy do templatu, graf som priložil v prílohe, a mám toho celkom dosť, nerád by som to celé prerábal a pod. Takže moja otázka spočíva len v tom či som nejako schopný takýto graf spracovať v JS, zobraziť si ho kľudne môžem aj cez window.alert to je už jedno, len spôsobom {{ nejaky_list }} to uloží pekne v js, aj viem s tým pracovať, ale {{moj_graf}} to padá. Ak sa to týmto spôsobom ako si predstavujem nebude dať, tak budem musieť zbytočne duplikovať 3x veľa kódu.

Nahoru Odpovědět

8.2.2021 12:04

Pavel

Člen

Pavel:8.2.2021 12:43

Takze problem je v tom, ze tam jsou vsechny grafy naraz. Pokud chci prepinat, tak nejjednodussi je udelat css tridu, ktera bude mit display:'none' a tema tlacitkama prepinat tuhle tridu pomoci classListToggle na prislusnem grafu.

Nahoru Odpovědět

8.2.2021 12:43

Peter Mlich

Člen

Peter Mlich:8.2.2021 16:30

Data do js je nejlepsi posilat ve formatu text/json nebo text/csv

<script>
var x, y, z, yz;
x = 'a;b;c'.split(';'); // simulace str csv to js array, zrovna na spravny csv format bys musel pridat nejakou knihovnu
alert(x.join(', '))
y = {x:1, y:2, z:3}; // js array 1
z = [1, 2, 3]; // js array 2
yz = {x:1, y:[1, 2, 3], z:{x:1, y:2, z:3}}; // aray pak muzes ruzne kombinovat
var json, obj;
json = '{"result":true, "count":42}';
obj = JSON.parse(json); // convert str json to js array
</script> <!-- vzdy musis mit tag script ukonceny! -->

No, co se tyce problemu tech grafu, jak pise kolega, je treba to rozdelit na jednotlive grafy a pomoci javascriptu a tlacitek prepinat, css vlastnost display. Neco takoveho...
google = js switch visible image example

<style>
#xxx div.hide {display:none;}
#xxx div.show {display:block;}
</style>
<div id=xxx>

<div>1</div>
<div>2</div>
<div>3</div>

</div>

<input type=button value=1 onclick="myShow(this)">
<input type=button value=2 onclick="myShow(this)">
<input type=button value=3 onclick="myShow(this)">

<script>
function myShow(el)
{
var items = document.getElementById("xxx").getElementsByTagName("DIV").
// hide all
for (i=0; i<items.length;i++)
{ items[i].className = 'hide'; }
// show one
i = (int) el.value;
items[i].className = 'show';
}
</script>

Editováno 8.2.2021 16:32

Nahoru Odpovědět

8.2.2021 16:30

Peter Mlich

Člen

Peter Mlich:8.2.2021 16:38

https://jsfiddle.net/7e62m5st/
Udelal jsem tam 2-3 zmeny.

1. Script do policka script.
2. za getElementsByTagName("DIV"). nema byt tecka, ale strednik nebo nic
3.
i = (int) el.value;
i = el.value * 1 - 1; // vypada to, ze fiddle si s int neporadi, je to prilis moderni

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

8.2.2021 16:38

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.