[PHP, JS, SVG]Dotvoření SVG po načtení v prohlížeči

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod Václav M. 26. 12. 2017 01:39

Zdravím,

mám již téměř dokončený projekt na vykreslení grafů ve formátu SVG. Zatím jde jen o čárové grafy, později doplním i koláčové a sloupcové.

No, ono to téměř dokončený vlastně znamená to, že projekt funguje. Chybí však dodělat například mechanismy na zpracování dalších dat ( :idea: do podoby, kterou potřebuje vlastní třída, která SVG vytváří) a pár dalších drobností. A jedna z nich je tou, která mě v tuto chvíli zajímá mnohem více než nějaké zpracování dat (pro které bych musel mít k dispozici nějaké další vzorky v těch žádaných formátech, z kterých bych ta data exportoval).

Pro čárové grafy jsem chtěl (do pozadí, jako jednu z nižších vrstev) přidat síť čar imitující :?: milimetrový papír. Bohužel, vytvoření milimetrového papíru je velmi zdlouhavé (a bohužel i paměťově náročné) - čemuž se není co divit, když má být vytvořeno například 1200 horizontálních a 24000 vertikálních čar (nebo i více).

Chci tedy tento milimetrový papír přidat až dodatečně, po vytvoření základního grafu.

Ovšem, nejsem si jist, která z následujících cest je nejlepší. Ani jedna však neumožní, aby byl milimetrový papír součástí obsahu uloženého do souboru, pokud nedojde k vykreslení SVG na plochu - před vytvořením souboru.

1. JavaScript + PHP (oba směry čar najednou)
2. JavaScript + PHP (každý směr čar zvlášť)
3. JavaScript

A nebo bych SVG uložil do souboru bez milimetrového papíru - a ten doplnil až po opětovném načtení. Ovšem pak hrozí, že v případě stažení a otevření jinde milimetrový papír nebude k dispozici vůbec.

:idea:
V tuto chvíli jako zdroj dat používám CSV soubory generované appkou IoTool. Aby byl projekt rozšiřitelný (například o import z dalších zdrojů), je rozdělen do tří částí. První se stará o konverzi dat z původního zdroje do pole, které je poté použito jako vlastní zdroj dat pro graf. Druhá část se stará o paměť tohoto pole (a dalších dat). A třetí část se stará o konverzi do podoby grafu.

:?:
V případě použití atributu viewbox a mm jako jednotky u velikosti, by měla milimetrová síť odpovídat skutečnosti. Ale vyzkoušené to, bohužel, nemám.
Václav M.
Junior
Uživatelský avatar

Odeslat příspěvekod Wikan 26. 12. 2017 10:24

Zdlouhavé vytváření? To musí být maximálně zlomek sekundy. Takže to asi děláš nějak divně.
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod Václav M. 26. 12. 2017 19:43

Já na generování kódu používám vlastní projekt, který je schopen vytvořit jakýkoliv značkový kód určité struktury, pokud k použitým značkám existuje DTD soubor. Tedy, ten DTD soubor je možné i dopsat.

Pro vytvoření milimetrového papíru pak třídu, která opakuje vybranou značku (line) v určitém počtu - a tuto řadu uzavírá do další značky (g).
Kód: Vybrat vše
$this -> GraphPaper = new \MarC\SimpleAssembler('g', 'line');
$this -> GraphPaper -> Set_Comment('graph paper start', \UniCAT\Core::UNICAT_OPTION_ABOVE);
$this -> GraphPaper -> Set_Comment('graph paper end', \UniCAT\Core::UNICAT_OPTION_BELOW);
$this -> GraphPaper -> Set_TopLevelStyles('stroke-width', '0.5');
$this -> GraphPaper -> Set_TopLevelStyles('stroke', '#AAAAAA');

$LineNumber = 0;

for( $Index = 0; $Index < $this -> Width; $Index++ )
{
   $this -> GraphPaper -> Set_Content();
   $this -> GraphPaper -> Set_SubLevelAttributes($LineNumber, 'x1', $Index);
   $this -> GraphPaper -> Set_SubLevelAttributes($LineNumber, 'x2', $Index);
   $this -> GraphPaper -> Set_SubLevelAttributes($LineNumber, 'y1', 0);
   $this -> GraphPaper -> Set_SubLevelAttributes($LineNumber, 'y2', $this -> Height);

   $LineNumber ++;
}

for( $Index = 0; $Index < $this -> Height; $Index++ )
{
   $this -> GraphPaper -> Set_Content();
   $this -> GraphPaper -> Set_SubLevelAttributes($LineNumber, 'x1', 0);
   $this -> GraphPaper -> Set_SubLevelAttributes($LineNumber, 'x2', $this -> Width);
   $this -> GraphPaper -> Set_SubLevelAttributes($LineNumber, 'y1', $Index);
   $this -> GraphPaper -> Set_SubLevelAttributes($LineNumber, 'y2', $Index);

   $LineNumber ++;
}

$this -> LocalCode = $this -> GraphPaper -> Execute();


Možná existuje nějaký nástroj na tvorbu kódu, který je rychlejší (já jsem rychlost svého projektu netestoval a takto rozsáhlý kód jsem zatím netvořil) - ale s tímto se mi pracuje dobře (no, bylo by divné, kdyby se mi pracovalo špatně s vlastním výtvorem - přestože jsou tam některé prvky, které by upravit potřebovaly).

:!:
Já se ale ptal na to, jak to SVG dotvořit podle plánu - a navrhnul jsem tři řešení. Všechna s JavaScriptem, dvě z toho s AJAXem.
Václav M.
Junior
Uživatelský avatar

Odeslat příspěvekod Wikan 26. 12. 2017 19:58

Ano, navrhnul jsi tři řešení. Ale všechno je jenom obcházení původního nedokonalého návrhu. Takže chceš lepit k sobě špatné věci, nebo udělat jednu dobrou?

A mřížka se dá udělat i jinak, než explicitním vykreslením všech čar:
https://codepen.io/pigabo/pen/eAiLF
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod Václav M. 26. 12. 2017 22:21

Díky za odkaz. O této možnosti jsem nevěděl. Tak jsem to řešil jiným způsobem.
:arrow:

No, určitě by se tím daly udělat i hlavní vodící čáry, ale jak nastavit, aby je vykresloval od spodního okraje, ne od horního? A kdybych mohl toto nastavení udělat i pro vlastní graf, abych nemusel souřadnice přepočítávat, tak by se mi to docela zamlouvalo.
Václav M.
Junior
Uživatelský avatar


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 1 návštěvník