Anychart用户手绘注解序列化反序列化时设置X轴锚点的问题
AnyChart 手绘注解绑定X轴锚点方案
是可以实现的,注解默认会绑定X轴数据坐标而非屏幕像素坐标,配置后可随X轴范围变化同步位移,具体说明如下:
- 你当前使用的序列化代码
const data = chart.plot().annotations().toJson(true)本身就满足需求,传入的true参数会导出注解的全量配置,包含xAnchor(X轴锚点对应数据值)、xScaleId(绑定的X轴比例尺ID)等核心属性,不需要额外修改序列化逻辑。 - 注解默认开启数据坐标模式,要实现随X轴位移的效果,只需要在反序列化时满足两个条件:
- 反序列化的目标图表X轴比例尺ID,和序列化时的原图表X轴比例尺ID保持一致,如果是同个图表实例刷新数据无需额外调整,如果是新的图表实例需要手动对齐X轴比例尺ID配置
- 目标图表X轴对应的数据值域包含注解锚点的数值,即可实现X轴范围调整时注解自动匹配对应数据位置
- 反序列化操作代码如下:
// data 为之前序列化得到的JSON数据 chart.plot().annotations().fromJson(data)
如果出现注解位置不跟随X轴变化的问题,优先检查是否手动将注解的X轴坐标模式修改为了像素模式(即调用了
annotation.xMode('pixel')相关方法),改回默认的value模式即可恢复数据绑定效果。
内容的提问来源于stack exchange,提问作者brian goo
相关产品推荐
相关产品推荐

