Изменить размер и цвет заголовка lightningChart - PullRequest
Новая
       7

Изменить размер и цвет заголовка lightningChart

0 голосов
/ 12 июля 2020

Я добавляю размер заголовка диаграммы с помощью кода ниже 

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)

Как изменить размер шрифта, цвет шрифта и цвет фона.

1 Ответ

1 голос
/ 13 июля 2020

Вы можете изменить размер шрифта текстового поля пользовательского интерфейса с помощью 

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

Метод .setFont может принимать либо новый экземпляр FontSettings, либо функцию мутатора. Функцию мутатора можно использовать для редактирования существующих настроек шрифта.

.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>
...