จะระบายสีทุกแท่งในแผนภูมิไทม์ไลน์ของ Google ได้อย่างไร

ฉันได้อ่านคำตอบอื่น ๆ ที่นี่ และได้เพิ่มคุณสมบัติ 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


charts google-visualization react-google-charts
person Rounak Jain    schedule 26.08.2020    source แหล่งที่มา

คำตอบ (1)


arrow_upward
1
arrow_downward

บนแผนภูมิไทม์ไลน์ บทบาทของสไตล์จะใช้ได้เฉพาะเมื่อใช้เป็นคอลัมน์ที่สามเท่านั้น

ดังนั้นคุณจะต้องเพิ่มคอลัมน์ที่สองสำหรับป้ายกำกับแท่ง
แต่คุณสามารถใช้ค่า 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' }}
/>
person WhiteHat    schedule 26.08.2020