Chart.js折线无法按规则显示不同颜色及时间标签格式异常

原因 #

从配置写法判断你使用的是Chart.js 2.x版本，该版本中Line数据集的borderColor属性传入数组仅会作用于数据点的描边样式，无法直接给折线的不同线段设置不同颜色，这是自定义颜色数组不生效的核心原因。

修复方案 #

推荐升级到Chart.js 3.x及以上版本，该版本新增的segment配置项可直接实现折线分段变色：

1. 先卸载旧版依赖，安装对应版本的chart.js和react-chartjs-2
2. 修改数据集配置，新增segment属性，示例如下：

datasets: [
  {
    fill: false,
    borderWidth: 2,
    label: "rssi",
    pointRadius: 0,
    data: signals.slice(startPoint, startPoint + sliceLength).map(p => p.rssi),
    // 新增segment配置实现分段变色
    segment: {
      borderColor: ctx => {
        const rssi = ctx.p0.parsed.y;
        if (rssi >= 20) return "#006400";
        if (rssi > 13 && rssi < 20) return "#00FF00";
        if (rssi > 0 && rssi < 13) return "#FFFF00";
        return "#FF0000";
      }
    }
  }
]

不需要再单独给pointBorderColor、pointHoverBorderColor等属性重复赋值颜色数组，冗余配置可直接删除。

原因 #

你的buildTimeLabels逻辑存在两处核心错误：

1. 跨天判断逻辑中，直接用秒级时间戳new Date(el)生成日期对象，没有乘以1000转换为毫秒级，导致生成的日期全部为1970年，判断逻辑完全失效
2. 仅通过小时数大小判断是否跨天逻辑不严谨，遇到数据间隔大于1小时的场景会判断错误

修复方案 #

直接替换buildTimeLabels函数为以下代码即可：

const buildTimeLabels = (series: number[]) => {
  const _fullDateFlags = [];

  series.forEach((el, idx) => {
    if (idx === 0 || idx === series.length - 1) {
      _fullDateFlags.push(true);
      return;
    }
    // 转换为毫秒级时间戳后判断是否为同一天
    const prevUtcDate = new Date(series[idx-1] * 1000).getUTCDate();
    const currUtcDate = new Date(el * 1000).getUTCDate();
    _fullDateFlags.push(prevUtcDate !== currUtcDate);
  });

  const getDate = (ts: number) => {
    const date = new Date(ts * 1000);
    return `${date.getUTCDate()}/${date.getUTCMonth() + 1}/${date.getUTCFullYear()}`;
  };

  const getTime = (ts: number) => {
    const date = new Date(ts * 1000);
    return `${padTo2Digits(date.getUTCHours())}:${padTo2Digits(date.getUTCMinutes())}`;
  };

  const getFull = (ts: number) => [`${getTime(ts)}`, `${getDate(ts)}`];

  return _fullDateFlags.map((el, idx) => {
    return el ? getFull(series[idx]) : [getTime(series[idx]), " "];
  });
};

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