主题

---

立即下载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的源代码可以作为一个很好的参考。