如何在amchart4折线图(XY)上显示第一个和最后一个数据点

要在amCharts 4的折线图（XY）上突出显示第一个和最后一个数据点，可以通过自定义图形样式来实现。以下是详细的步骤和示例代码：

基础概念

amCharts 4是一个强大的JavaScript图表库，用于创建交互式图表。折线图（XY）是一种常见的图表类型，用于显示数据点之间的趋势。

类型

简单折线图：基本的折线图，显示数据点的趋势。
面积图：折线图下方填充颜色，显示数据区域的面积。
标记点图：在每个数据点上显示标记。

应用场景

时间序列分析：显示随时间变化的数据趋势。
性能监控：实时监控系统指标的变化。
财务分析：展示股票价格、收益等财务数据。

示例代码

以下是如何在amCharts 4折线图上突出显示第一个和最后一个数据点的示例代码：

// 创建图表实例
let chart = am4core.create("chartdiv", am4charts.XYChart);

// 添加数据
chart.data = [
  { date: new Date(2021, 0, 1), value: 10 },
  { date: new Date(2021, 0, 2), value: 20 },
  { date: new Date(2021, 0, 3), value: 30 },
  // 更多数据...
];

// 创建折线系列
let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";

// 创建第一个和最后一个数据点的标记
let firstPoint = series.dataItems.getIndex(0);
let lastPoint = series.dataItems.getIndex(series.dataItems.length - 1);

// 自定义第一个数据点的标记
let firstMarker = new am4core.Circle();
firstMarker.radius = 8;
firstMarker.fill = am4core.color("#FF0000"); // 红色
firstMarker.stroke = am4core.color("#000000"); // 黑色边框
firstMarker.strokeWidth = 2;
firstPoint.setMarker(firstMarker);

// 自定义最后一个数据点的标记
let lastMarker = new am4core.Circle();
lastMarker.radius = 8;
lastMarker.fill = am4core.color("#00FF00"); // 绿色
lastMarker.stroke = am4core.color("#000000"); // 黑色边框
lastMarker.strokeWidth = 2;
lastPoint.setMarker(lastMarker);

// 配置图表的轴和其他设置
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";
chart.xAxes.push(new am4charts.DateAxis());
chart.yAxes.push(new am4charts.ValueAxis());