0

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

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)

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

4

1 回答 1

1

您可以更改 UI 文本框的字体大小

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

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

.setSize .setFont

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

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

文本框的背景颜色可以用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>

于 2020-07-13T07:16:28.243 回答