javascript - 如何在使用lineseries制作的线条上方对齐uielement文本框

Question

我正在使用 LightningChartJs，并且正在添加一个 UIElement 文本框，我想将它放在线条上方，但是当我将线条的比例提供给 addUIElement 时，它不会显示出来。

chart.addUIElement(UIElementBuilders.TextBox,myseries.scale).setText('test')

Answer 1

当您使用另一个系列的比例时，UIElement 的定位是使用该系列的坐标完成的。默认情况下，UIElement 将定位到 0,0 坐标。如果您的线系列未显示此坐标，则 UIElement 将不在视野范围内。

因此，如果您有一条从 10,10 到 20,20 的线并且您没有设置 UIElement 的位置，那么您很可能不会看到 UIElement，因为它定位到 0,0 位置。在这种情况下，您应该将 UIElement 的位置设置为 10,10-20,20 范围内的某个值。uiElement.setPosition({x: 12, y:12 })

请参阅下面的代码片段以获取工作示例。

const {
    lightningChart,
    UIElementBuilders
} = lcjs

const chart = lightningChart().ChartXY()

const series = chart.addLineSeries()

series.addArrayY([1, 2, 1, 3, 2, 2, 3, 2, 1])

// add text box on the chart, using series scale
const textOverLine = chart.addUIElement(UIElementBuilders.TextBox, series.scale)
    .setText('My Text')
    // position the text, this is in the line series coordinates
    .setPosition({ x: 4.5, y: 2.1 })

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