时间戳

首页 > 解决方案 > 有没有办法在谷歌图表中按标签设置背景颜色？

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

问题描述

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

我想要标签背景像： Thomas Jefferson -> red, George Washington -> Green, John Jay -> yellow, John Adams -> Orange

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

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' }}
/>

任何人都可以帮忙吗？提前致谢。

标签： reactjsgoogle-visualization

解决方案

您的颜色数组序列必须与您提供的数据数组相同，第一个数据名称将从 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);

推荐阅读