0

我正在尝试根据以下示例使用 react-google-charts 创建时间线：

<Chart
  width={'100%'}
  height={'200px'}
  chartType="Timeline"
  loader={<div>Loading Chart</div>}
  data={[
    [
      { type: 'string', id: 'Position' },
      { type: 'string', id: 'Name' },
      { type: 'date', id: 'Start' },
      { type: 'date', id: 'End' },
    ],
    [
      'President',
      'George Washington',
      new Date(1789, 3, 30),
      new Date(1797, 2, 4),
    ],
    ['President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    [
      'President',
      'Thomas Jefferson',
      new Date(1801, 2, 4),
      new Date(1809, 2, 4),
    ],
    [
      'Vice President',
      'John Adams',
      new Date(1789, 3, 21),
      new Date(1797, 2, 4),
    ],
    [
      'Vice President',
      'Thomas Jefferson',
      new Date(1797, 2, 4),
      new Date(1801, 2, 4),
    ],
    [
      'Vice President',
      'Aaron Burr',
      new Date(1801, 2, 4),
      new Date(1805, 2, 4),
    ],
    [
      'Vice President',
      'George Clinton',
      new Date(1805, 2, 4),
      new Date(1812, 3, 20),
    ],
    [
      'Secretary of State',
      'John Jay',
      new Date(1789, 8, 25),
      new Date(1790, 2, 22),
    ],
    [
      'Secretary of State',
      'Thomas Jefferson',
      new Date(1790, 2, 22),
      new Date(1793, 11, 31),
    ],
    [
      'Secretary of State',
      'Edmund Randolph',
      new Date(1794, 0, 2),
      new Date(1795, 7, 20),
    ],
    [
      'Secretary of State',
      'Timothy Pickering',
      new Date(1795, 7, 20),
      new Date(1800, 4, 12),
    ],
    [
      'Secretary of State',
      'Charles Lee',
      new Date(1800, 4, 13),
      new Date(1800, 5, 5),
    ],
    [
      'Secretary of State',
      'John Marshall',
      new Date(1800, 5, 13),
      new Date(1801, 2, 4),
    ],
    [
      'Secretary of State',
      'Levi Lincoln',
      new Date(1801, 2, 5),
      new Date(1801, 4, 1),
    ],
    [
      'Secretary of State',
      'James Madison',
      new Date(1801, 4, 2),
      new Date(1809, 2, 3),
    ],
  ]}
  rootProps={{ 'data-testid': '3' }}
/>

我想做的是动态显示每个类别的数据（总统、副总统、国务卿）——我想从我的数据库中提取一些数据用于总统、一些用于副总统等，并显示它而不是硬编码像这样的数据。

我在想这样的事情：

const presidents = [
   ['President',
    {name from db},
    {interval from db},
    {interval from db},

so on ...
]

并用 {presidents} 替换数据中的所有总统。不过，我不确定如何格式化它（以上内容对我不起作用）。有没有人有任何建议/经验？提前致谢！

4

0 回答 0