ChartJS全局关闭数据点显示后如何仅为最后一个数据点配置样式

你可以通过给数据集的点样式属性配置回调函数，根据数据索引动态返回属性值，单独控制最后一个数据点的显示效果，优先级高于全局options.elements.point的配置，不需要修改原有全局关闭所有点的配置。

实现代码 #

const data = {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    datasets: [
      {
        data: tgpDatasets,
        borderColor: "rgba(103,120,137,1)",
        borderWidth: 1,
        segment: {
          // 优化为动态计算最后一段折线的索引，不需要硬编码
          borderColor: ({ p0DataIndex, p1DataIndex }) => 
            p0DataIndex === tgpDatasets.length - 2 && p1DataIndex === tgpDatasets.length -1 
            ? "red" 
            : "rgba(103,120,137,1)",
        },
        // 动态控制点半径，仅最后一个点显示
        pointRadius: (context) => context.dataIndex === tgpDatasets.length - 1 ? 4 : 0,
        // 可按需配置最后一个点的其他属性，示例如下
        pointBackgroundColor: (context) => context.dataIndex === tgpDatasets.length - 1 ? "red" : "rgba(103,120,137,1)",
        pointBorderColor: (context) => context.dataIndex === tgpDatasets.length - 1 ? "#fff" : "transparent",
        pointHoverRadius: (context) => context.dataIndex === tgpDatasets.length - 1 ? 6 : 0,
      },
    ],
};

配置说明 #

• 所有点样式相关属性（pointRadius、pointBackgroundColor、pointBorderColor、pointHoverRadius等）都支持传入回调函数，回调参数context包含当前数据点的dataIndex（数据索引）、datasetIndex（数据集索引）等信息，可根据业务需要自定义判断逻辑。
• 数据集层级的样式配置优先级高于全局options.elements.point的配置，因此原有全局关闭所有点的配置不需要修改，仅会被最后一个点的自定义配置覆盖。
• 示例中优化了原有segment的判断逻辑，改为基于数据长度动态计算索引，后续数据量变更时不需要手动修改硬编码的索引值，兼容性更强。

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