在 lightningchart 中添加注释文本

Question

有没有在lightningchart中添加Adding annotation text

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

例如我想在 x - 0 and y - 20

中添加文本 - Hello

Answer 1

您可以创建 UI 元素，以将文本添加到图表，使用 chart.addUIElement. To create specifically text, you can use 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) (UIDraggingModes documentation).

可以使用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>

在 lightningchart 中添加注释文本

Adding annotation text in lightningchart

lightningchart