更改 lightningChart 标题大小和颜色

Question

我正在使用以下代码添加图表标题大小

const _chartVolumeTitle = charts[0].addUIElement(
        UIElementBuilders.TextBox
            .setBackground(UIBackgrounds.Rectangle),
        {
            x: axisX.scale,
            y: axisY.scale
        }
    )
        .setText('Test Title')
        .setPosition({ x: 0, y: 0 })
        .setOrigin(UIOrigins.LeftTop)
        .setDraggingMode(UIDraggingModes.notDraggable)

如何更改字体大小、字体颜色和背景颜色。

Answer 1

您可以使用

更改 UI 文本框的字体大小

textBox
    .setFont((font) => font
        .setSize(40)
    )

.setFont 方法可以接受新的 FontSettings 实例或增变函数。 mutator 函数可用于编辑现有的字体设置。

.setSize .setFont

字体颜色可以用textBox.setTextFillStyle改变。

textBox
    .setTextFillStyle((style) => style
        .setColor(ColorHEX('#0f0'))
    )

TextBox 背景颜色可以用 textBox.setBackground. In most cases you will need to create a new SolidFill to style the background fill and stroke styles as the Text box by default uses a emptyFill 改变。

textBox
    .setBackground(style => style
        .setFillStyle(new SolidFill({ color: ColorHEX('#f00') }))
    )

请参阅下面的代码片段，了解这些 API 的不同用途的结果。

const {
    lightningChart,
    emptyLine,
    SolidFill,
    ColorHEX,
    UIElementBuilders,
    UIBackgrounds,
    UIOrigins,
    UIDraggingModes,
    SolidLine
} = lcjs

const chart = lightningChart()
    .ChartXY()

chart
    .setTitle('Title')
    .setTitleFont(f => f
        .setSize(24)
    )
    .setTitleFillStyle(new SolidFill({ color: ColorHEX('#f00') }))

const title = chart.addUIElement(
    UIElementBuilders.TextBox
        .setBackground(UIBackgrounds.Rectangle),
    {
        x: chart.getDefaultAxisX().scale,
        y: chart.getDefaultAxisY().scale
    }
)
    .setText('Test Title')
    .setPosition({ x: 0, y: 0 })
    .setOrigin(UIOrigins.LeftTop)
    .setDraggingMode(UIDraggingModes.notDraggable)
    .setFont((font) => font
        .setSize(40)
    )
    .setBackground(style => style
        .setFillStyle(new SolidFill({ color: ColorHEX('#f00') }))
    )
    .setTextFillStyle((style) => style
        .setColor(ColorHEX('#0f0'))
    )


const title2 = chart.addUIElement(
    UIElementBuilders.TextBox
        .setBackground(UIBackgrounds.Rectangle),
    chart.uiScale
)
    .setText('Test Title')
    .setPosition({ x: 50, y: 50 })
    .setOrigin(UIOrigins.Center)
    .setDraggingMode(UIDraggingModes.notDraggable)
    .setFont((font) => font
        .setSize(40)
    )
    .setBackground(style => style
        .setStrokeStyle(new SolidLine({ fillStyle: new SolidFill({ color: ColorHEX('#f00') }) }))
    )

<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>

更改 lightningChart 标题大小和颜色

Change lightningChart Title Size and color

lightningchart