樣式、顏色和字體

立即下載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)

下一節將探討更完整的樣式定制——主題。