LightningChart添加指定坐标且随缩放同步缩放文本的方法

你当前使用的addChartMarkerXY接口设计初衷是做交互式数据点标记，自带的结果表属于屏幕像素级UI元素，组件内置的自动防重叠布局逻辑会在文本数量较多时自动挪动标记位置避免互相遮挡，这就是你遇到的位置偏移、文本聚集问题的直接原因。同时这类UI元素默认大小是固定像素值，不会跟随图表轴的缩放、平移同步变化，没法满足你要的缩放同步效果。

要实现精准绑定X/Y轴坐标、无自动偏移、随图表缩放同步缩放的文本标注，直接使用LightningChart原生的轴坐标系文本元素即可，不需要借助ChartMarker组件：

• 文本直接挂载在XY轴坐标系下，设置的坐标值和轴实际数值一一对应，不会触发自动位置调整
• 轴坐标系下的文本默认会跟随图表缩放、平移操作同步移动、改变显示大小，和参考效果完全一致
• 大量文本场景下可以关闭不必要的交互逻辑，大幅降低渲染开销

参考实现代码：

/**
 * 在图表指定轴坐标位置添加随缩放同步的文本
 * @param {string} textContent 要显示的文本内容
 * @param {string|number} chartId 目标图表实例索引
 * @param {number} xPos X轴坐标值
 * @param {number} yPos Y轴坐标值
 */
function addText(textContent, chartId, xPos, yPos) {
  const axisText = chart[chartId]
    .addText()
    // 设置文本使用轴坐标系，和图表数据共用同一套坐标规则
    .setCoordinateSystem(CoordinateSystems.axis)
    // 精准设置坐标位置，不会被自动布局偏移
    .setPosition({ x: xPos, y: yPos })
    // 设置显示文本
    .setText(String(textContent))
    // 自定义文本样式，可根据需求调整
    .setFont(fontSetting => fontSetting
      .setSize(14)
      .setFamily('Microsoft Yahei')
      .setWeight('normal')
    )
    // 关闭鼠标拖拽交互，避免人为误改位置
    .setMouseInteractions(false)
    // 关闭自动适配边界逻辑，强制固定在指定坐标
    .setAutoAdjustToFit(false)
    // 可根据需求设置文本对齐方式，比如以坐标点为文本左下角
    .setOrigin(UIOrigins.leftBottom)

  return axisText
}

• 如果你后续需要文本固定大小不随缩放变化，只需要把setCoordinateSystem的参数改为CoordinateSystems.screen即可，此时坐标仍然可以映射轴数值，但文本大小保持固定像素
• 单张图表文本量超过1000条时，建议使用批量UI渲染接口创建文本，相比逐个创建文本渲染性能可以提升5倍以上
• 纯文本展示场景不要启用Marker自带的网格线、刻度弹窗等附属组件，这类组件会增加额外的布局计算开销，更容易引发布局错位问题

内容的提问来源于stack exchange，提问作者Gracie williams