Barva je významným designovým prvkem ve vizualizacích dat, který přispívá k působivějšímu a poutavějšímu příběhu pro vaše publikum a spontánně upoutá jeho pozornost. Lidé intuitivně spojují barvy s pocity, značkami, jídlem a dalšími pojmy. Díky těmto asociacím jsou vaše vizualizace smysluplnější a snáze pochopitelné.
Vlastnost Color Series v Oracle Analytics obsahuje různé jedinečné barevné palety, které si můžete vybrat pomocí vizualizací připravených k použití. Tento článek vysvětluje, jak povolit modulům plug-in vlastní vizualizace, aby přímo dědily a využívaly tyto připravené barevné palety.
Obrázek 1 ukazuje plátno se čtyřmi vizualizacemi připravenými k použití, které zobrazují výchozí sérii barev Redwood.
Obrázek 1: Výchozí řada barev (Redwood).
Barvu vizualizací můžete změnit dvěma způsoby:
1. Jak je znázorněno na obrázku 2, klikněte na nabídku v pravém horním rohu plátna, klikněte na Vlastnosti sešitu a vyberte řadu barev. Můžete také přidat novou paletu barev kliknutím na možnost Přidat paletu.
Obrázek 2: Kroky ke změně možnosti barevné řady (metoda 1)
2. Jak je znázorněno na obrázku 3 a 4, klikněte na nabídku v pravém horním rohu grafu, vyberte Barva, klikněte na Spravovat přiřazení a vyberte řadu barev.
Obrázek 3: Kroky ke změně možnosti barevné řady (metoda 2)
Obrázek 4: Kroky ke změně možnosti barevné řady (metoda 2)
Například výběrem možnosti barevné řady Glacier převezmou všechny vizualizace na plátně tuto barevnou řadu.
Obrázek 5: Řada barev ledovce
Kód zásuvného modulu se změní tak, aby zdědil vlastnost Color Series
Změny barevných řad se automaticky nevztahují na vlastní vizualizace. Chcete-li toho dosáhnout, aktualizujte svůj vlastní kód zásuvného modulu.
Chcete-li porozumět změnám kódu, podívejte se na příklad s vlastním zásuvným modulem s názvem Oracle Analytics Marimekko vlastní vizualizační zásuvný modul. Tento plugin si můžete stáhnout z knihovny rozšíření Oracle Analytics. Další informace o zásuvném modulu Marimekko získáte kliknutím sem.
Složka plug-in se skládá z následujících souborů:
Obrázek 6: Soubory zásuvného modulu Marimekko
Otevřete soubor marimekkoViz.js.
Skript má dvě části:
- funkci createData a funkci render.
V obou částech kódu musíte provést několik změn.
Změny ve funkci createData
219 MarimekkoViz.prototype._generateData = function(oDataLayout, oTransientRenderingContext)
‚color' pouzdro:
case "color":
colorObj = this.getDataItemColorInfo(oDataLayoutHelper, oColorContext, oColorInterpolator, nRow, 0);
color_hash = colorObj.sColor;
cause = colorObj.sSeriesColorLabel;
break;Proměnná ‚color_hash' ukládá hexadecimální kód barvy zděděné barevné řady a proměnnou ‚Cause' obsahuje hodnotu z gramatiky barev vizualizace dat.
Změny ve funkci renderování
Podívejte se na vlastnost stylu CSS (řádek #599) v zásuvném modulu Marimekko, která vrací ‚d.color' zdědit barevnou řadu vizualizace dat. ‚d.color' vrátí hodnotu uloženou v ‚color_hash' variabilní.
566 causes.append(„rect")
567 .attr(„data-row", function(d) )
570 .attr(„y", function (d) )
585 .attr(„height", function (d) )
595 .attr(„width", function (d) )
598 .style(„fill", function (d) )
601 .on(„mouseover", function(d) )
608 .on(„mousemove", function(d) )
614 .on(„mouseout", function(d) )
618 .on(„click", function(d, i ))
634 .on(„contextmenu", function (d, i) );
.style(„fill", function (d) )
S výše uvedenými změnami kódu vlastní plugin zohledňuje vybranou barevnou řadu, ale změna barvy se neprojeví okamžitě. Chcete-li, aby vlastní vizualizace okamžitě odrážela změny v paletě barev, přidejte následující řádky kódu:
1198 MarimekkoViz.prototype._OnDefaultColorSettingsChange = function(/*oClientEvent*/);
1207
1208 MarimekkoViz.prototype._doInitializeComponent = function() ;
Přidejte funkci ‚Marimekkoviz.prototype._onDefaultColorSettingsChange' pro vykreslení požadovaného kontextu (řádek #1198).
Přidat subscribeToEvent ‚DEFAULT_COLOR_SETTINGS_CHANGED' (řádek #1213).
S těmito změnami kódu, když se změní výchozí nastavení barev v sešitu, znovu vykreslí všechny vizualizace, aby odrážely změny. Například při výběru barevné řady Glacier zdědí vlastní vizualizace (zásuvný modul Marimekko vlevo) vybranou barevnou řadu, jak je znázorněno na obrázku 7.
Obrázek 7: Barevná řada Glacier
Úprava barvy písma textu na základě barvy pozadí
Když do modulu plug-in implementujete vlastní řadu barev, někdy není barva písma čitelná, jak ukazuje obrázek 8:
Obrázek 8: Výchozí barva písma pro vlastní zásuvné moduly
Chcete-li tento problém vyřešit, následující ukázka kódu vysvětluje přístup k zobrazení textu bílým písmem, pokud je barva pozadí tmavá a černé písmo pro světlé pozadí.
767 .style(„fill", function(d)
‚d.color' drží zděděnou barvu vizualizace dat. Rozbijte hexadecimální kód na tři části a extrahujte jednotlivé červené, zelené a modré barvy. Každé dvě číslice kódu představují hodnotu v hexadecimálním zápisu (základ 16). Podrobnosti o převodu si můžete přečíst online.
Jakmile máte intenzity pro jednotlivé barvy, můžete určit celkovou intenzitu barvy a zvolit odpovídající barvu textu.
Zásuvný modul Marimekko považuje prahovou hodnotu za 130. Pokud převedená hodnota překročí 130, barva písma je černá, a pokud je hodnota menší než 130, barva písma je bílá. Prahovou hodnotu si můžete vybrat na základě svého úsudku. Obrázek 9 ukazuje příklad této implementace barvy písma.
Obrázek 9: Barvy písma založené na barvě pozadí v grafu Marimekko
Výzva k akci:
Stáhněte si vlastní kód zásuvného modulu z Knihovny rozšíření Oracle Analytics. Upravte vlastní kód zásuvného modulu, jak je vysvětleno v tomto článku, abyste mohli využít vlastnost barevné řady plátna ve svých vlastních vizualizacích, stejně jako v jakýchkoli jiných předem sestavených vizualizacích.
Zdroj: Oracle
