配置ChartJS解析多数据集以绘制多折线图问题

问题背景 #

需要基于给定格式的数据，用ChartJS绘制多条折线：每个shortUrl对应一条折线，X轴为日期，Y轴为当日点击数。当前代码仅显示坐标轴，无数据渲染，且无报错。

原始数据格式 #

const allData = [{
  "data": {
    "shortUrl": "http://[DOMAIN]/[URL1]",
    "clicksByDate": [
      { "date": "3/21", "count": 1 },
      { "date": "3/22", "count": 3 },
      { "date": "3/23", "count": 2 }
    ]
  },
  {
    "data": {
      "shortUrl": "http://[DOMAIN]/[URL2]",
      "clicksByDate": [
        { "date": "3/22", "count": 4 },
        { "date": "3/24", "count": 1 }
      ]
    }
  }
}]

错误的尝试代码 #

new Chart(document.getElementById("stat-chart"), {
  type: "line",
  options: {
    parsing: {
      xAxisKey: "clicksByDate.date",
      yAxisKey: "clicksByDate.count",
    },
  },
  data: {
    labels: allData[0].data.clicksByDate.map((row) => row.date), // 仅取第一个数据集的日期，不全面
    datasets: allData, // 数据集格式不符合ChartJS要求
  },
});

解决方案 #

1. 整理统一的X轴标签 #

收集所有数据中的日期，去重后排序，确保X轴包含所有出现过的日期：

// 提取所有日期并去重
const allDates = [...new Set(allData.flatMap(item => item.data.clicksByDate.map(d => d.date)))]
// 按MM/DD格式排序
.sort((a, b) => {
  const [aMonth, aDay] = a.split('/').map(Number);
  const [bMonth, bDay] = b.split('/').map(Number);
  return aMonth - bMonth || aDay - bDay;
});

2. 转换为ChartJS要求的数据集格式 #

将每个shortUrl转换为符合ChartJS规范的数据集，为每个X轴日期匹配对应的点击数（无数据时设为0或null）：

const datasets = allData.map(item => {
  const dataPoints = allDates.map(date => {
    const match = item.data.clicksByDate.find(d => d.date === date);
    return match ? match.count : 0; // 无数据时显示0，也可设为null让ChartJS跳过该点
  });
  return {
    label: item.data.shortUrl, // 用短链接作为折线的标签
    data: dataPoints,
    borderColor: `hsl(${Math.random() * 360}, 70%, 50%)`, // 随机生成区分颜色
    fill: false // 不填充折线下方区域
  };
});

3. 初始化图表 #

使用整理后的标签和数据集创建图表：

new Chart(document.getElementById("stat-chart"), {
  type: "line",
  data: {
    labels: allDates,
    datasets: datasets
  },
  options: {
    scales: {
      x: {
        title: {
          display: true,
          text: '日期'
        }
      },
      y: {
        title: {
          display: true,
          text: '点击数'
        },
        beginAtZero: true // Y轴从0开始
      }
    }
  }
});

关键说明 #

• 原代码的datasets直接传入allData，但ChartJS需要的数据集是包含label和data数组的对象，而非原始嵌套结构，因此无法解析。
• 仅取第一个数据集的日期会导致其他数据集的日期无法匹配，必须统一收集所有日期作为X轴标签。

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