样式、颜色和字体

立即下载LightningChart JS

所有的LightningChart JS样式，颜色，字体等都可以由用户配置，它们中的大多数甚至可以在运行时的任何时候更改。

为了描述不同的风格，LightningChart JS有自己的一组类，要定制LightningChart的风格，理解这些类是至关重要的。

最重要的样式类如下：

• FillStyle——描述填充区域的样式。
• LineStyle——描述描边或边框的样式。
• Color——描述1种颜色。
• FontSettings——描述一种字体，包括字号、大小、粗细等。

这些样式类中的许多都是抽象的，这意味着它有许多实现可供您选择。例如对于线型，您可以使用SolidLine或虚线。

以下是给图表标题添加纯色的基本用例：

import { SolidFill, ColorHEX } from "@arction/lcjs"; 

chart.setTitleFillStyle(new SolidFill({ color: ColorHEX("#ff0000") }));

下面是另一个改变图表标题字体的例子：

import { FontSettings } from "@arction/lcjs"; 

chart.setTitleFont( 
new FontSettings({ 
family: "Segoe UI", 
size: 12, 
weight: "bold", 
style: "normal", 
}) 
);

通常情况下您不需要完全指定一个新样式，而只是更改一些可用的属性例如字体系列，为此几乎所有的样式方法都允许提供修改当前样式的回调函数。

chart.setTitleFont((font) => font.setFamily("Segoe UI"));

这里要特别说明一下所有LightningChart样式对象都是不可变的，这意味着如果您调用像FontSettings.setFamily()这样的方法，它实际上不会改变对象，而是创建一个新对象，因此没有意外副作用的风险。

下面是另一个配置线型的例子：

import { SolidLine, SolidFill, ColorHEX } from "@arction/lcjs"; 

LineSeries.setStrokeStyle( 
new SolidLine({ 
thickness: 2, 
fillStyle: new SolidFill({ 
color: ColorHEX("#ff0000"), 
}), 
}) 
);

这些基本的样式化实践可能需要一些时间来“理解”，但是一旦理解了基本概念，它们的应用程序就应该是合乎逻辑的，下面你可以找到一些常见的样式用例的亮点。

如何更改图例字体大小?

// Example, Legend title and entries styling 
const legend = chart.addLegendBox() 
.add(chart) 
.setTitleFont((font) => font.setSize(12)) 
.setTitleFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) })) 
.setEntries((entry, component) => entry
.setTextFont((font) => font.setSize(12)) 
.setTextFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) })) 
)

如何设计轴刻度?

所有与轴刻度相关的样式(如网格线、刻度线、标签字体、标签颜色等)都是通过刻度策略配置的。

// Example, configure Numeric major and minor labels font and fill style. 
chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.Numeric, ticks => ticks
.setMajorTickStyle((major) => (!major instanceof VisibleTicks) ? major : major
.setLabelFont((font) => font.setSize(10)) 
.setLabelFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) })) 
) 
.setMinorTickStyle((minor) => (!minor instanceof VisibleTicks) ? minor : minor
.setLabelFont((font) => font.setSize(10)) 
.setLabelFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) })) 
) 
)

如何设计图表背景？

大多数LightningChart图表类型有两个单独的背景部分，“背景”和“系列背景”(由轴包围的内部区域)。每个都有自己的填充和边框样式配置：

// Example, style chart backgrounds 
chart
.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(32, 32, 32) })) 
.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(12, 12, 12) })) 
.setSeriesBackgroundStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorRGBA(255, 255, 255) }) }))

要隐藏某些内容，最好的选择是使用emptyFill或emptyLine：

// Example, remove series background 
chart
.setSeriesBackgroundFillStyle(emptyFill) 
.setSeriesBackgroundStrokeStyle(emptyLine)

// Example, remove series background but keep mouse events tracking 
chart
.setSeriesBackgroundFillStyle(transparentFill) 
.setSeriesBackgroundStrokeStyle(emptyLine)

如何设计中轴线?

// Example, specify axis line style 
chart.getDefaultAxisX().setStrokeStyle(new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(255, 0 ,0) }) })) 
// Example, hide axis line 
chart.getDefaultAxisX().setStrokeStyle(emptyLine)

下一节将探讨更完整的样式定制——主题。