ChartJs技术咨询：能否仅显示折线图的指定数据点（如最后一个点）？

完全可以实现，以下是两种简洁的方案：

方案一：通过数组配置控制单个点的显示 #

Chart.js允许pointRadius、pointStyle等点样式属性接收数组值，数组中每个元素对应一个数据点的样式。只需将不需要显示的点的半径设为0，指定点（如最后一个）设为期望大小即可。

示例代码：

const chartData = {
  labels: ['1月', '2月', '3月', '4月', '5月'],
  datasets: [
    {
      label: 'A系列',
      data: [12, 19, 15, 24, 30],
      borderColor: '#2196F3',
      // 前4个点半径设为0（隐藏），最后1个点设为6（显示）
      pointRadius: [0, 0, 0, 0, 6],
      pointStyle: 'circle',
      pointBackgroundColor: '#2196F3'
    },
    {
      label: 'B系列',
      data: [8, 14, 11, 18, 22],
      borderColor: '#F44336',
      // 动态生成数组：适配任意长度的数据集
      pointRadius: Array(chartData.datasets[1].data.length - 1).fill(0).concat([6]),
      pointStyle: 'circle',
      pointBackgroundColor: '#F44336'
    }
  ]
};

new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: chartData,
  options: {
    responsive: true
  }
});

如果需要显示任意指定位置的点，只需调整pointRadius数组中对应索引的数值即可。比如要显示第3个点（索引为2），就将数组中索引2的位置设为6，其余设为0。

方案二：通过插件自定义绘制逻辑 #

如果需要更复杂的控制逻辑（比如根据数据值判断是否显示），可以使用Chart.js的插件钩子，在afterDatasetDraw阶段手动绘制指定点：

const customPointPlugin = {
  afterDatasetDraw: (chart, args, options) => {
    const { ctx, data, chartArea } = chart;
    const dataset = args.dataset;
    const lastIndex = dataset.data.length - 1;
    
    // 获取最后一个点的坐标
    const meta = chart.getDatasetMeta(args.datasetIndex);
    const pointPosition = meta.data[lastIndex].getCenterPoint();
    
    // 绘制圆形点
    ctx.save();
    ctx.beginPath();
    ctx.arc(pointPosition.x, pointPosition.y, 6, 0, Math.PI * 2);
    ctx.fillStyle = dataset.pointBackgroundColor;
    ctx.fill();
    ctx.strokeStyle = dataset.borderColor;
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.restore();
  }
};

new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: chartData,
  options: {
    responsive: true,
    elements: {
      point: {
        radius: 0 // 先隐藏所有默认点
      }
    }
  },
  plugins: [customPointPlugin]
});

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