更改lightningChart标题大小和颜色
更改lightningChart标题大小和颜色
提问于 2020-07-12 17:45:21
我正在添加图表标题大小与以下代码
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
Stack Overflow用户
回答已采纳
发布于 2020-07-13 15:16:28
可以使用更改UI文本框的字体大小
textBox
.setFont((font) => font
.setSize(40)
).setFont方法既可以接受新的FontSettings实例，也可以接受赋值函数。mutator函数可用于编辑现有字体设置。
字体颜色可以使用textBox.setTextFillStyle更改。
textBox
.setTextFillStyle((style) => style
.setColor(ColorHEX('#0f0'))
)可以使用textBox.setBackground更改TextBox背景色。在大多数情况下，由于文本框默认使用emptyFill，因此您需要创建一个新的SolidFill来设置背景填充和描边样式的样式。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62859487
复制相关文章
相似问题
腾讯云开发者
