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){
220
221 var oDataModel = this.getRootDataModel();
222 if(!oDataModel || !oDataLayout){
223 return;
224 }
225 // this.setRowDisplayNames([]);
226 this.setRowDisplayNames(new Map());
227 var aAllMeasures = oDataModel.getColumnIDsIn(datamodelshapes.Physical.DATA);
228 var nMeasures = aAllMeasures.length;
229 var nRows = oDataLayout.getEdgeExtent(datamodelshapes.Physical.ROW);
230 var nRowLayerCount = oDataLayout.getLayerCount(datamodelshapes.Physical.ROW);
231 var oDataLayoutHelper = oTransientRenderingContext.get(dataviz.DataContextProperty.DATA_LAYOUT_HELPER);
232 var oColorContext = this.getColorContext(oTransientRenderingContext);
233 var oColorInterpolator = this.getCachedColorInterpolator(oTransientRenderingContext, datamodelshapes.Logical.COLOR);
234
235 var rowLabels = [];
236 for(var nRow = 0; nRow < nRowLayerCount; nRow++){
237
238 var rowKey = oDataLayoutHelper.getLogicalEdgeName(datamodelshapes.Physical.ROW, nRow);
239 var displayName = oDataLayout.getLayerMetadata(datamodelshapes.Physical.ROW, nRow, data.LayerMetadata.LAYER_DISPLAY_NAME);
240 this.getRowDisplayNames().set(rowKey, {order: nRow, name: displayName});
241 if(rowKey == „row“){
242 this.setXDisplayName(displayName);
243 }
244 else if(rowKey == „color“) {
245 if (displayName)
246 this.setYDisplayName(displayName);
247 }
<strong>var oColorContext = this.getColorContext(oTransientRenderingContext);</strong>
Proměnná oColorContext (řádek #232) načte barevný kontext z oTransientRenderingContext
oTransientRenderingContext poskytuje kontext pro vykreslení vizualizace. Načte štítek barevné řady pro každý řádek ze vstupní datové sady (ve funkci createData) pomocí objektu color context.
Dále se podívejte na příkaz switch case pro ‚typ řádku‘ jako ‚color‘ (řádek #277), jak je znázorněno v následujícím příkladu kódu. Přečte hodnotu z gramatiky barev ve vizualizaci.
Změny v ‚color‘ pouzdro:
264 switch (rowType) {
265 case „row“:
266 month = row!=““ ? row + „, “ +oDataLayout.getValue(datamodelshapes.Physical.ROW, nRowLayer, nRow, false)
267 : oDataLayout.getValue(datamodelshapes.Physical.ROW, nRowLayer, nRow, false);
268 if(gmonth == „“)
269 {
270 gmonth = month;
271 }
272 else{
273 gmonth = gmonth+‘,’+month;
274 }
275 xSet.add(month);
276 break;
277 case „color“:
278 colorObj = this.getDataItemColorInfo(oDataLayoutHelper, oColorContext, oColorInterpolator, nRow, 0);
279 color_hash = colorObj.sColor;
280 cause = colorObj.sSeriesColorLabel;
281 break;
282 }
283 }
284 var aOutput =[];
285
286
287 aOutput = {month: gmonth, cause: cause, value: value, color: color_hash, row: nRow};
288 if(value >= 0)
289 {
290 outputMap.push(aOutput);
291 }
292 }
‚color‘ pouzdro:
case "color":<strong>
</strong> 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) {
568 return d.row;
569 })
570 .attr(„y“, function (d) { …
584 })
585 .attr(„height“, function (d) { …
594 })
595 .attr(„width“, function (d) { …
597 })
598 .style(„fill“, function (d) {
599 return d.color;
600 })
601 .on(„mouseover“, function(d) { …
607 })
608 .on(„mousemove“, function(d) { …
613 })
614 .on(„mouseout“, function(d) { …
617 })
618 .on(„click“, function(d, i ){ …
633 })
634 .on(„contextmenu“, function (d, i) { …
644 });
.style(„fill“, function (d) {
return d.color;
})
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*/){
1199 var oTransientVizContext = this.createVizContext();
1200 if(!this._handleVizPlaceholderState(oTransientVizContext)){
1201 //this.readyForData({aEventTriggers:[DEFAULT_COLOR_SETTINGS_CHANGED_EVENT_TRIGGER]});
1202 var oTransientVizContext = this.assertOrCreateVizContext();
1203 var oTransientRenderingContext = this.createRenderingContext(oTransientVizContext);
1204 this._render(oTransientRenderingContext);
1205 }
1206 };
1207
1208 MarimekkoViz.prototype._doInitializeComponent = function() {
1209
1210 MarimekkoViz.superClass._doInitializeComponent.call(this);
1211
1212 this.subscribeToEvent(events.types.INTERACTION_HIGHLIGHT, this.onHighlight, this.getViewName() + „.“ + events.types.INTERACTION_HIGHLIGHT);
1213 this.subscribeToEvent(events.types.DEFAULT_COLOR_SETTINGS_CHANGED, this._onDefaultColorsSettingsChange, „**“);
1214
1215 };
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) {
768 var hex = d.color;
769 var red = parseInt(hex.substring(1, 3), 16);
770 var green = parseInt(hex.substring(3, 5), 16);
771 var blue = parseInt(hex.substring(5, 7), 16);
772
773 console.log(red, green, blue);
774 if ((red*0.299 + green*0.587 + blue*0.114) > 130) {
775 return „black“;
776 } else
777 return „white“;
778 }
‚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
