时间戳

首页 > 解决方案 > 在闪电图中添加注释文本

lightningchart - 在闪电图中添加注释文本

问题描述

无论如何要在闪电图中添加添加注释文本。

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

例如我想添加文本 - Hello inx - 0 and y - 20

标签： lightningchart

解决方案

您可以创建 UI 元素，将文本添加到图表，使用chart.addUIElement. 要创建特定的文本，您可以使用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 文档）。

可以使用 更改文本字体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>

推荐阅读