有没有办法在谷歌图表中按标签设置背景颜色？

Question

我正在使用 react google 时间线图来显示数据。

我想要标签背景，例如： Thomas Jefferson -> 红色，George Washington -> 绿色，John Jay -> 黄色，John Adams -> 橙色

我正在使用图表的颜色选项，例如：

options={{
    colors: ['red', 'orange', 'yellow', 'green'],

}}

我的图表代码如下：

<Chart
width={'100%'}
height={'400px'}
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(2019, 2, 4),
        new Date(2019, 3, 30),
    ],
    [
        'President',
        'Thomas Jefferson',
        new Date(2019, 2, 4),
        new Date(2019, 4, 4),
    ],
    [
        'Vice President',
        'John Adams',
        new Date(2019, 3, 21),
        new Date(2019, 6, 4),
    ],
    [
        'Secretary of State',
        'John Jay',
        new Date(2019, 5, 4),
        new Date(2019, 8, 20),
    ],
    [
        'President',
        'John Adams',
        new Date(2019, 2, 25),
        new Date(2019, 8, 22),
    ],
    [
        'Vice President',
        'George Washington',
        new Date(2019, 7, 22),
        new Date(2019, 11, 31),
    ],
]}
options={{
    colors: ['red', 'orange', 'yellow', 'green'],

}}
rootProps={{ 'data-testid': '7' }}
/>

有人可以帮忙吗？提前致谢。

Answer 1

这是我找到的解决方案。

<Chart
width={'100%'}
height={'400px'}
chartType="Timeline"
loader={<div>Loading Chart</div>}
data={[
    [
        { type: 'string', id: 'Position' },
        { type: 'string', id: 'Name' },
        { type: 'string', id: 'style', role: 'style' },
        { type: 'date', id: 'Start' },
        { type: 'date', id: 'End' },
    ],
    [
        'President',
        'George Washington',
        'green'
        new Date(2019, 2, 4),
        new Date(2019, 3, 30),
    ],
    [
        'President',
        'Thomas Jefferson',
        'red',
        new Date(2019, 2, 4),
        new Date(2019, 4, 4),
    ],
    [
        'Vice President',
        'John Adams',
        'orange',
        new Date(2019, 3, 21),
        new Date(2019, 6, 4),
    ],
    [
        'Secretary of State',
        'John Jay',
        'yellow',
        new Date(2019, 5, 4),
        new Date(2019, 8, 20),
    ],
    [
        'President',
        'John Adams',
        'orange',
        new Date(2019, 2, 25),
        new Date(2019, 8, 22),
    ],
    [
        'Vice President',
        'George Washington',
        'green',
        new Date(2019, 7, 22),
        new Date(2019, 11, 31),
    ],
]}
rootProps={{ 'data-testid': '7' }}
/>

Answer 2

您的颜色数组顺序必须与您提供的数据数组相同，第一个数据名称将采用 colorArray 中的第一个颜色。

import React from "react";
import ReactDOM from "react-dom";
import Chart from "react-google-charts";
class App extends React.Component {
 getColors() {
  let colorArray = [];
   rows.forEach((item, index) => {
    // logic to push color name in colorArray as as data index
   })
   return colorArray;
 }
 render() {
  return (
    <div className="App">
    <Chart
      width={"100%"}
      height={"400px"}
      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",
          "Thomas Jefferson",
          new Date(2019, 2, 4),
          new Date(2019, 5, 4)
        ],
        [
          "Vice President",
          "John Adams",
          new Date(2019, 3, 21),
          new Date(2019, 6, 4)
        ],
        [
          "Secretary of State",
          "John Jay",
          new Date(2019, 5, 4),
          new Date(2019, 8, 20)
        ],
        [
          "Vice President",
          "George Washington",
          new Date(2019, 7, 22),
          new Date(2019, 11, 31)
        ]
      ]}
      options={{
        colors: this.getColors()
      }}
      rootProps={{ "data-testid": "7" }}
    />
  </div>
  );
 }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 3

使用颜色代码代替颜色名称。 https://react-google-charts.com/timeline-chart#setting-individual-bar-colors

options = {{ colors: ['#FF0000', '#FFA500', '#FFFF00', '#00FF00'] }};