Lightning Chart TextBox组件宽高控制及点位适配咨询

1. 控制TextBox的宽高 #

可以通过setSize方法直接指定TextBox的宽高（基于绑定的坐标轴单位）。结合你设置的LeftTop原点，要实现高度覆盖y=20到y=16，只需将高度设为20-16=4，位置保持y:20即可。

修改代码如下：

const textBox = LeadChart.addUIElement(UIElementBuilders.TextBox, {
    x: axisX,
    y: axisY,
})
    .setPosition({ x: 2.2, y: 20 })
    .setOrigin(UIOrigins.LeftTop)
    .setVisible(true)
    .setText("") // 直接空字符串即可，无需填充空格
    .setSize({ width: 0.3, height: 4 }); // 宽度按需调整，高度=20-16=4

如果需要更精细的样式控制，还可以通过setBackground调整填充/边框样式，但setSize已能满足基础的宽高需求。

2. 为每个点位指定TextBox的矩形尺寸 #

遍历目标点位数据，为每个点位创建独立的TextBox，根据点位的自定义参数（如z值或额外字段）设置对应宽高即可。

示例代码（以dataGray数组为例）：

// 遍历点位数据，逐个创建自定义尺寸的TextBox
dataGray.forEach(point => {
    // 根据点位属性定义宽高（可自定义逻辑，这里用z值做示例）
    const boxWidth = point.z * 0.1;
    const boxHeight = point.z * 0.5;

    const pointTextBox = LeadChart.addUIElement(UIElementBuilders.TextBox, {
        x: axisX,
        y: axisY,
    })
        .setPosition({ x: point.x, y: point.y })
        .setOrigin(UIOrigins.LeftTop)
        .setVisible(true)
        .setText("")
        .setSize({ width: boxWidth, height: boxHeight })
        .setBackground(background => 
            background.setFillStyle(new SolidFill({ color: ColorHEX("#039BE5") }))
        )
        .setMouseInteractions(false);
});

如果你的点位数据中包含专门的尺寸字段（如width、height），直接替换示例中的boxWidth和boxHeight即可。

内容的提问来源于stack exchange，提问作者Dolev Dublon