主題

---

立即下載LightningChart JS

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

本節探討了一種更完整的方式來配置LightningChart JS - Themes的視覺外觀。

首先，LightningChart JS與一組內置主題一起分發，供您選擇：

• darkGold
• light
• cyberspace
• turquoiseHexagon

這些主題都是手工制作的，非常美觀，但通常情況下用戶需要圖表組件適應現有的視覺設計，而不是其它的。

例如許多軟件公司都有自己的品牌顏色和視覺設計，一個關鍵的要求通常是可以配置圖表以適應設計。

雖然這可以使用前面描述的樣式API來完成，但如果需要實現多個主題和/或具有不同圖表的多個應用程序，則可能非常不切實際。

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

自定義主題

當創建任何LightningChart JS組件時可以提供一個Theme對象，該對象本質上是一個長長的屬性列表，其中包含庫中每個單獨的視覺組件和特性的默認樣式。

從理論上講，創建一個完全自定義的主題就像定義一個具有theme所有屬性的對象一樣簡單。

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

這樣的函數包含在單獨的開源包@ 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 })

此實用程序功能也可以與無代碼在線編輯器一起使用。

強烈推薦使用這種簡單的方法，特別是在早期開發階段，以便快速開始使用自己的品牌著色。

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