在代码中添加如下配置:
chart.cursor = new am5xy.XYCursor();
chart.cursor.lineX.stroke = am5.color("#dd0000"); // 配置光标线颜色
chart.cursor.lineX.strokeDasharray = "3,3"; // 配置光标线样式
chart.cursor.lineY.stroke = am5.color("#dd0000"); // 配置光标线颜色
chart.cursor.lineY.strokeDasharray = "3,3"; // 配置光标线样式
chart.cursor.pointFill = am5.color("#dd0000"); // 配置十字光标点颜色
chart.cursor.xAxis = xAxis; // 配置 X 轴
chart.cursor.yAxis = yAxis; // 配置 Y 轴
chart.cursor.behavior = "none"; // 关闭默认光标行为
chart.cursor.tooltip = new am5.Tooltip(); // 添加 Tooltip
完整代码示例:
var chart = am5xy.create("chartdiv", am5xy.XYChart);
// 添加数据
var data = [{"date":"2022-01-01","value":10},{"date":"2022-01-02","value":20},{"date":"2022-01-03","value":15}];
chart.data = data;
// 配置 X 轴
var xAxis = chart.xAxes.push(new am5xy.DateAxis());
xAxis.dataFields.date = "date";
// 配置 Y 轴
var yAxis = chart.yAxes.push(new am5xy.ValueAxis());
// 配置折线图
var series = chart.series.push(new am5xy.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
// 配置光标
chart.cursor = new am5xy.XYCursor();
chart.cursor.lineX.stroke = am5.color("#dd0000"); // 配置光标线颜色
chart.cursor.lineX.strokeDasharray = "3,3"; // 配置光标线样式
chart.cursor.lineY.stroke = am5.color("#dd0000"); // 配置光标线颜色
chart.cursor.lineY.strokeDasharray = "3,3"; // 配置光标线样式
chart.cursor.pointFill = am5.color("#dd0000"); // 配置十字光标点颜色
chart.cursor.xAxis = xAxis; // 配置 X 轴
chart.cursor.yAxis = yAxis; // 配置 Y 轴
chart.cursor.behavior = "none"; // 关闭默认光标行为
chart.cursor.tooltip = new am5.Tooltip(); // 添加 Tooltip