如何为 google 时间线图表中的每个条形图着色？

Question

我在这里阅读了一些其他答案并相应地添加了 role 属性但它没有用。

<Chart
  width={'500px'}
  height={'300px'}
  chartType="Timeline"
  loader={<div>Loading Chart</div>}
  data={[
    [
      { type: 'string', id: 'President' },
      { type: 'date', id: 'Start' },
      { type: 'date', id: 'End' },
      {type: 'string', role: 'style'}
    ],
    ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4), 'gold'],
    ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4), 'color: #ccc'],
    ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4), 'gold'],
  ]}
  options={{
    showRowNumber: true,
  }}
  rootProps={{ 'data-testid': '1' }}
/>

参考：https://react-google-charts.com/timeline-chart

Answer 1

在时间线图上，样式作用只有作为第三栏时才会起作用

因此您还需要为条形标签添加第二列。
但如果需要，您可以对该列使用 null 值...

<Chart
  width={'500px'}
  height={'300px'}
  chartType="Timeline"
  loader={<div>Loading Chart</div>}
  data={[
    [
      { type: 'string', id: 'President' },
      { type: 'string', id: 'Bar' },        // <-- add bar label here...
      { type: 'string', role: 'style' },    // <-- add style role here...
      { type: 'date', id: 'Start' },
      { type: 'date', id: 'End' }
    ],
    ['Washington', null, 'gold', new Date(1789, 3, 30), new Date(1797, 2, 4)],
    ['Adams', null, '#ccc', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    ['Jefferson', null, 'gold', new Date(1801, 2, 4), new Date(1809, 2, 4)],
  ]}
  options={{
    showRowNumber: true,
  }}
  rootProps={{ 'data-testid': '1' }}
/>

Answer 2

我明白了！我根据角色属性对条形图进行了排序。我在数据结构中使用了角色属性。

const data = [ [ { type: "string", id: "Phases" },{ type: "string", id: "Name" }, { type: 'string', 角色: 'style' }, { type: "date", id: "Start" }, { type: "date", id: "End" } ]];

enter image description here

这是我在 Whosebug 上的第二个回答。我仍然不明白如何缩进答案中的代码。

如何为 google 时间线图表中的每个条形图着色？

How to color every bar in google timeline chart?

charts

google-visualization

react-google-charts