AmCharts bullet重叠问题：Y轴150处两个方块标记如何调整为分开显示

解决方案 #

你可以通过给重叠的方块标记设置纵向/横向偏移实现分开显示，具体实现步骤如下：

方案1：通过字段动态配置偏移（推荐）

该方案灵活性最高，仅需修改数据集和补充一行配置即可：

1. 调整你的数据源，给同X轴、同Y值的重叠数据点添加自定义偏移字段，示例数据结构如下：

   const chartData = [
     // 重叠的第一个点，向下偏移6像素
     {
       date: '2023-10-01', 
       diastolic: 150, 
       bullet_color: '#ff0000', 
       alert_text: '异常读数1',
       offsetY: -6 
     },
     // 重叠的第二个点，向上偏移6像素
     {
       date: '2023-10-01', 
       diastolic: 150, 
       bullet_color: '#00ff00', 
       alert_text: '异常读数2',
       offsetY: 6 
     }
   ]
   

2. 在你现有的graph配置中补充一行，指定读取偏移值的字段：

   var diaGraph = new AmCharts.AmGraph();
       diaGraph.valueAxis = bpValueAxis;
       diaGraph.valueField = "diastolic";
       diaGraph.balloonText = "DIA:[[diastolic]] "+uom+"<br><p style='font-size:9px;max-width:300px; word-wrap: break-word;'>[[alert_text]]</p>";
       diaGraph.colorField = "bullet_color";
       diaGraph.lineColor = "#808080";
       diaGraph.bullet = "square";
       // 新增这一行即可
       diaGraph.bulletOffsetField = "offsetY";
       chartBP.addGraph(diaGraph);
   

如果需要横向分开两个方块，把offsetY换成offsetX，对应配置diaGraph.bulletOffsetField = "offsetX"即可。

方案2：固定全局偏移（仅适用于两个graph重叠的场景）

如果两个重叠的方块分别属于两个不同的graph，可以直接给每个graph设置固定的偏移值：

// 第一个graph配置
diaGraph.bulletOffsetY = -5
// 第二个graph配置
anotherGraph.bulletOffsetY = 5

其他可选优化

如果不需要严格对齐Y轴刻度，也可以开启Y轴的微小自动偏移，或给重叠的bullet设置不同的bulletSize、半透明填充来区分显示。

内容的提问来源于stack exchange，提问作者jenish lila