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进行更改。在大多数情况下，您将需要创建一个新的SolidFill来设置背景填充和笔触样式的样式，因为默认情况下，“文本”框使用的是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>

更改闪电图标题大小和颜色

1 个答案: