TypeScript中使用Chart.js访问首个数据集及切换问题求助

核心问题拆解 #

你碰到两个关键问题：

1. 访问chartData.datasets仅能获取最后一组数据：你导出的对象重复定义了4次datasets键，JavaScript对象中重复键会被最后一次赋值覆盖，导致前三组数据全部丢失。
2. 赋值datasets: chartData.datasets[0]触发类型错误：你的LineType类型要求datasets是数组类型，但chartData.datasets[0]是单个数据集对象，类型不匹配，因此报错。

错误信息翻译 #

原错误信息：

"Type '{ label: string; data: number[]; fill: boolean; borderColor: string; tension: number; }' is missing the following properties from type '{ label: string; data: number[]; fill: boolean; borderColor: string; tension: number; }[]': length, pop, push, concat, and 28 more"

翻译为：

类型“{ label: string; data: number[]; fill: boolean; borderColor: string; tension: number; }”缺少类型“{ label: string; data: number[]; fill: boolean; borderColor: string; tension: number; }[]”的以下属性：length、pop、push、concat及其他28个属性

修复方案 #

1. 修正数据集存储结构 #

将重复的datasets键改为数组形式，确保四组数据都能被正确存储：

export const chartData = {
  labels: ["Q1", "Q2", "Q3", "Q4"],
  // 把四组数据集统一放到datasetGroups数组中，每组对应原有的datasets内容
  datasetGroups: [
    /* marketData - 第0组 */
    [
      {
        label: "Fannie Mae", 
        data: [5, 6, 7, 8],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      },
      {
        label: "Freddie Mac", 
        data: [9, 10, 11, 12],
        fill: false,
        borderColor: 'red',
        tension: 0.1
      },
      {
        label: "Mortgage Bankers Association", 
        data: [8, 12, 6, 7],
        fill: false,
        borderColor: 'purple',
        tension: 0.1
      },
      {
        label: "National Association of Realtors", 
        data: [4, 7, 3, 0],
        fill: false,
        borderColor: 'green',
        tension: 0.1
      }
    ],
    /* forecastRates - 第1组 */
    [
      {
        label: "Fannie Mae", 
        data: [3.5, 4.0, 4.7, 5.2],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      },
      {
        label: "Freddie Mac", 
        data: [4.0, 4.7, 5.2, 6.0],
        fill: false,
        borderColor: 'red',
        tension: 0.1
      },
      {
        label: "Mortgage Bankers Association", 
        data: [4.2, 5.5, 5.8, 6.5],
        fill: false,
        borderColor: 'purple',
        tension: 0.1
      },
      {
        label: "National Association of Realtors", 
        data: [3.2, 6.3, 7.3, 6.5],
        fill: false,
        borderColor: 'green',
        tension: 0.1
      }
    ],
    /* forecastOrignations - 第2组 */
    [
      {
        label: "Fannie Mae", 
        data: [100, 200, 300, 400],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      },
      {
        label: "Freddie Mac", 
        data: [500, 600, 400, 300],
        fill: false,
        borderColor: 'red',
        tension: 0.1
      },
      {
        label: "Mortgage Bankers Association", 
        data: [400, 500, 580, 650],
        fill: false,
        borderColor: 'purple',
        tension: 0.1
      },
      {
        label: "National Association of Realtors", 
        data: [320, 630, 730, 650],
        fill: false,
        borderColor: 'green',
        tension: 0.1
      }
    ],
    /* orignations - 第3组 */
    [
      {
        label: "Fannie Mae", 
        data: [100, 200, 300, 700],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      },
      {
        label: "Freddie Mac", 
        data: [333, 666, 555, 444],
        fill: false,
        borderColor: 'red',
        tension: 0.1
      },
      {
        label: "Mortgage Bankers Association", 
        data: [543, 631, 713, 323],
        fill: false,
        borderColor: 'purple',
        tension: 0.1
      },
      {
        label: "National Association of Realtors", 
        data: [433, 655, 733, 655],
        fill: false,
        borderColor: 'green',
        tension: 0.1
      }
    ]
  ]
}

2. 修正类型匹配问题 #

LineType的datasets字段要求是数组类型，根据需求选择两种赋值方式：

• 取整组数据集：直接使用datasetGroups[index]（本身就是数组，类型完全匹配）
• 取单个数据集对象：用[]包裹对象，转为数组类型

export type LineType = {
    labels: string[];
    datasets: {
        label: string;
        data: number[];
        fill: boolean;
        borderColor: string;
        tension: number;
    }[];
}

// 取第一组完整数据集（原marketData）
const config1: LineType = { 
    labels: chartData.labels,
    datasets: chartData.datasetGroups[0]
}

// 取某组中的单个数据集（比如第一组的Fannie Mae）
const singleDatasetConfig: LineType = {
  labels: chartData.labels,
  datasets: [chartData.datasetGroups[0][0]]
}

3. 实现按钮切换逻辑 #

用状态变量控制当前显示的数据集索引，点击按钮切换即可：

import { useState } from 'react';

// 初始化当前显示的数据集索引
const [currentIndex, setCurrentIndex] = useState(0);

// 切换数据集的函数
const switchDataset = (index: number) => {
  if (index >= 0 && index < chartData.datasetGroups.length) {
    setCurrentIndex(index);
  }
}

// 按钮示例
<button onClick={() => switchDataset(0)}>Market Data</button>
<button onClick={() => switchDataset(1)}>Forecast Rates</button>
<button onClick={() => switchDataset(2)}>Forecast Originations</button>
<button onClick={() => switchDataset(3)}>Originations</button>

// 当前图表配置
const currentChartConfig: LineType = {
  labels: chartData.labels,
  datasets: chartData.datasetGroups[currentIndex]
}

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