在闪电图中添加注释文本

Question

有没有办法在lightningchart中添加注释文本

我查了文档，但是没有找到。

例如，我想添加文本Helloinx - 0 and y - 20

Answer 1

您可以使用chart.addUIElement创建UI元素，将文本添加到图表中。要创建特定的文本，可以使用UIElementBuilders.TextBox。

按序列刻度定位文本:

const textElement = chart.addUIElement(UIElementBuilders.TextBox, series.scale)

将文本定位在两个不同的轴上:

const textElement = chart.addUIElement(UIElementBuilders.TextBox, { x: chart.getDefaultAxisX(), y: chart.getDefaultAxisY() })

默认情况下，文本元素是鼠标可拖动的。要禁用它，您可以调用text.setDraggingMode(UIDraggingModes.notDraggable)(uidragingmodes文档)。

文字字体可以用text.setTextFont()来改变。文字填充样式可以用text.setTextFillStyle()来改变。

背景样式可以使用text.setBackground()进行编辑。

参见下面的完整示例。

const {
lightningChart,
UIElementBuilders,
UIDraggingModes,
LinearGradientFill,
SolidLine,
RadialGradientFill
} = lcjs
const lc = lightningChart()
const chart = lc.ChartXY()
const series = chart.addLineSeries()
series.add([{
x: -1,
y: 0
}, {
x: 0,
y: 30
}, {
x: 1,
y: 0
}])
const text = chart.addUIElement(UIElementBuilders.TextBox, series.scale)
.setDraggingMode(UIDraggingModes.notDraggable)
.setTextFont(f => f.setSize(30).setWeight(700).setStyle('normal'))
.setTextFillStyle(new RadialGradientFill())
.setBackground(b => b.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new LinearGradientFill()
})))
.setPosition({
x: 0,
y: 20
})
.setText('Hello')
const text2 = chart.addUIElement(UIElementBuilders.TextBox, {
x: chart.getDefaultAxisX(),
y: chart.getDefaultAxisY()
})
.setDraggingMode(UIDraggingModes.notDraggable)
.setPosition({
x: 0,
y: 10
})
.setText('Hello, axis positioned')

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