如何为谷歌时间线图表中的每个条形图上色

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

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

常量数据=[[｛type:"string"，id:"Phases"｝，｛type："string"；

<Chart chartType="；日程表"；data={[…data，…firstArray，…secondArray]}width="100%"；height＝｛setChartHeight((firstArray.length+secondArray((｝options＝｛｛｛timeline:｛｝｝}/>

在此处输入图像描述

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