主題

---

立即下載LightningChart JS

上一節(jié)探討了如何直觀地配置LightningChart JS的各種組件，使用顏色、填充樣式、線條樣式和字體……

本節(jié)探討了一種更完整的方式來(lái)配置LightningChart JS - Themes的視覺外觀。

首先，LightningChart JS與一組內(nèi)置主題一起分發(fā)，供您選擇：

• darkGold
• light
• cyberspace
• turquoiseHexagon

這些主題都是手工制作的，非常美觀，但通常情況下用戶需要圖表組件適應(yīng)現(xiàn)有的視覺設(shè)計(jì)，而不是其它的。

例如許多軟件公司都有自己的品牌顏色和視覺設(shè)計(jì)，一個(gè)關(guān)鍵的要求通常是可以配置圖表以適應(yīng)設(shè)計(jì)。

雖然這可以使用前面描述的樣式API來(lái)完成，但如果需要實(shí)現(xiàn)多個(gè)主題和/或具有不同圖表的多個(gè)應(yīng)用程序，則可能非常不切實(shí)際。

所以，一個(gè)更好的方法是自定義主題。

自定義主題

當(dāng)創(chuàng)建任何LightningChart JS組件時(shí)可以提供一個(gè)Theme對(duì)象，該對(duì)象本質(zhì)上是一個(gè)長(zhǎng)長(zhǎng)的屬性列表，其中包含庫(kù)中每個(gè)單獨(dú)的視覺組件和特性的默認(rèn)樣式。

從理論上講，創(chuàng)建一個(gè)完全自定義的主題就像定義一個(gè)具有theme所有屬性的對(duì)象一樣簡(jiǎn)單。

然而由于有大量的屬性，理想情況下許多應(yīng)用程序不希望為每一個(gè)屬性費(fèi)心，從一個(gè)實(shí)用程序函數(shù)開始更容易，它只接受少量參數(shù)并將它們映射到Theme屬性中。

這樣的函數(shù)包含在單獨(dú)的開源包@ action /lcjs-themes中，下面是它的用法：

const myCustomTheme = makeFlatTheme({ 
fontFamily: 'Segoe UI, -apple-system, Verdana, Helvetica', 
backgroundColor: ColorHEX('#181818ff'), 
textColor: ColorHEX('#ffffc8ff'), 
dataColors: [ColorHEX('#ffff5b'), ColorHEX('#ffcd5b'), ColorHEX('#ff9b5b')], 
axisColor: ColorHEX('#00000000'), 
gridLineColor: ColorHEX('#303030ff'), 
uiBackgroundColor: ColorHEX('#161616ff'), 
uiBorderColor: ColorHEX('#ffffff'), 
dashboardSplitterColor: ColorHEX('#2d2d2dff'), 
}) 

const chart = lightningChart().ChartXY({ theme: myCustomTheme })

此實(shí)用程序功能也可以與無(wú)代碼在線編輯器一起使用。

強(qiáng)烈推薦使用這種簡(jiǎn)單的方法，特別是在早期開發(fā)階段，以便快速開始使用自己的品牌著色。

將來(lái)，花更多時(shí)間手工制作主題界面讓它看起來(lái)更精致(例如，利用漸變和發(fā)光/陰影效果)，在這個(gè)階段lcjs-themes的源代碼可以作為一個(gè)很好的參考。