如何在amCharts5中移除十字准线但保留提示框？

我在用amCharts5制作气泡图时，默认的十字准线提示框附带线条，想要只保留气泡上的提示框，移除十字准线的线条。

按照官方文档尝试隐藏十字准线线条：

cursor.lineY.setAll({
  visible: false
});
cursor.lineX.setAll({
  visible: false
});

结果线条确实被隐藏了，但轴末端的小提示框仍然存在，显示效果混乱怪异。

解决方法 #

要实现只保留系列（气泡）的提示框，同时完全移除十字准线相关的线条和轴提示，需要完成两步操作：

1. 移除轴上的tooltip配置：初始化X轴和Y轴时，不要设置tooltip属性，避免轴末端显示多余提示框。
2. 隐藏十字准线的线条：保留隐藏lineX和lineY的代码。

修改后的关键代码如下：

// 创建X轴，移除tooltip配置
var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 })
}));

// 创建Y轴，移除tooltip配置
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {})
}));

// 添加cursor并隐藏线条
var cursor = am5xy.XYCursor.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  snapToSeries: [series]
});
chart.set("cursor", cursor);

cursor.lineX.setAll({ visible: false });
cursor.lineY.setAll({ visible: false });

完整示例代码 #

// 创建根元素
var root = am5.Root.new("chartdiv");

// 设置主题
root.setThemes([
  am5themes_Animated.new(root)
]);

// 创建图表
var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: true,
  panY: true,
  wheelY: "zoomXY",
  pinchZoomX:true,
  pinchZoomY:true
}));

chart.get("colors").set("step", 2);

// 创建坐标轴 - 移除tooltip配置
var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 })
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {})
}));

// 创建系列 - 保留系列的tooltip
var series = chart.series.push(am5xy.LineSeries.new(root, {
  calculateAggregates: true,
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "y",
  valueXField: "x",
  valueField: "value",
  tooltip: am5.Tooltip.new(root, {
    labelText: "x: {valueX}, y: {valueY}, value: {value}, name: {name}"
  })
}));

// 添加气泡标记
var circleTemplate = am5.Template.new({});
series.bullets.push(function() {
  var graphics = am5.Circle.new(root, {
    fill: series.get("fill"),
  }, circleTemplate);
  return am5.Bullet.new(root, {
    sprite: graphics
  });
});

series.strokes.template.set("strokeOpacity", 0);

// 添加cursor并隐藏线条
var cursor = am5xy.XYCursor.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  snapToSeries: [series]
});
chart.set("cursor", cursor);

cursor.lineX.setAll({ visible: false });
cursor.lineY.setAll({ visible: false });

// 示例数据
var data = [{
  "y": 69,
  "x": 1,
  "value": 69,
 "name": "sue"
}, {
  "y": 69,
  "x": 2,
  "value": 69,
  "name": "john"
}]

series.data.setAll(data);

chart.appear(1000, 100);

#chartdiv {
  width: 100%;
  max-width: 100%;
  height: 250px;
}

<!-- 引入资源 -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

<div id="chartdiv"></div>

内容的提问来源于stack exchange，提问作者Mickey Vershbow