1
votes

Existe-t-il un moyen de définir la couleur d'arrière-plan par étiquette dans le graphique Google?

J'utilise le graphique chronologique React google pour afficher les données.

Je veux un arrière-plan d'étiquette comme: Thomas Jefferson -> rouge, George Washington -> Vert, John Jay -> jaune, John Adams -> Orange

J'utilise l'option de couleur du graphique comme: p>

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

Le code de mon graphique est comme ci-dessous:

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

}}

Quelqu'un peut-il m'aider? Merci d'avance.

reactjs google-visualization

2 commentaires

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

Merci pour votre réponse. essayé mais ne fonctionne pas. Au fait, j'ai trouvé la solution.

3 Réponses :

-1
votes

Au lieu du nom de la couleur, utilisez le code de couleur. https://react-google-charts.com/timeline- chart # setting-individual-bar-colors

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

0 commentaires

0
votes

votre séquence de tableau de couleurs doit être la même que votre tableau de données fourni, le premier nom de données prendra la première couleur de 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);

5 commentaires

alors comment veux-tu?

Je ne le veux pas par rapport à l'étiquette, voir la réponse que j'ai postée ici.

Vérifiez ma réponse mise à jour, au lieu de couleurs statiques, vous pouvez organiser l'ordre des couleurs selon vos données.

Pouvez-vous m'aider à changer un autre style, je veux supprimer la bordure et l'arrière-plan du tableau

veuillez visiter react-google-charts.com/timeline-chart pour tout type de modification. . Si vous trouvez ma réponse appropriée, veuillez voter et marquer comme réponse.

0
votes

Voici la solution que j'ai trouvée.

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

1 commentaires

Oui ! vous pouvez également le faire et appeler une fonction pour renvoyer un tableau de couleurs comme dans ma réponse mise à jour.