ChartJs如何移除折线图两点间连线及TypeScript中segments报错问题

解决方案 #

1. 隐藏最后两个数据点连线的实现 #

不需要修改原始数据插入NaN，ChartJS 3.x及以上版本提供的segment配置项可以直接实现指定线段的隐藏，原理是通过回调判断线段端点，将目标线段的边框颜色设为透明、或者边框宽度设为0即可。
核心判断逻辑：在segment的回调中，获取当前线段的后一个端点索引，如果该索引等于数据集总长度减1（也就是最后一个数据点），说明当前线段就是最后两个点之间的连线，直接隐藏即可。

2. TypeScript类型报错解决 #

segments不属于ChartDataSets接口报错的常见原因有两个：

• 当前使用的ChartJS版本低于3.x，2.x版本无原生segment支持，需先升级ChartJS到3.x及以上版本
• 对应版本的@types/chart.js类型定义未更新，可通过两种方式解决：
  • 升级@types/chart.js到匹配ChartJS版本的最新版
  • 临时使用类型断言，或者通过声明合并扩展ChartDataSets接口增加segment属性定义

修改后的配置示例 #

// 先获取数据总长度
const dataLength = data.length;

const chartDataSet: ChartDataSets = {
    data,
    label,
    borderWidth: 1,
    fill: false, // do not fill surface under line
    lineTension: 0, // set to 0 to use straight lines between points. Higher values show interpolated values
    borderColor: color,
    pointBorderColor: color,
    pointBackgroundColor: color,
    pointRadius: 2,
    // 增加segment配置，类型报错的话可临时加as any断言，或者更新类型定义
    segment: {
        borderColor: ctx => {
            // 如果当前线段的后一个点是最后一个数据点，返回透明色隐藏线段
            if (ctx.p1DataIndex === dataLength - 1) {
                return 'rgba(0,0,0,0)';
            }
            // 其他线段返回正常颜色
            return color;
        }
    } as any
};

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