如何为Google时间线图表中的每个柱线着色？

问题描述

我在这里阅读了其他一些答案，并相应地添加了role属性，但是它不起作用。

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

引用：https://react-google-charts.com/timeline-chart

解决方法

在时间轴图表上，样式角色仅在用作第三列时起作用。

因此，您还需要为条形标签添加第二列。
但是如果需要，您可以为该列使用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','#ccc',4),new Date(1801,['Jefferson',new Date(1809,]}
  options={{
    showRowNumber: true,}}
  rootProps={{ 'data-testid': '1' }}
/>