web-dev-qa-db-fra.com

Couleur de fond du graphique Google

Je dessine un graphique Google à l'aide de l'API javascript. Je veux changer le fond de la zone où les données sont tracées. Pour une raison quelconque, lorsque je définis les options d’arrière-plan de la manière suivante:

chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })

Cela change le fond de tout le graphique et pas la zone où les données sont tracées. Des idées sur la façon de changer uniquement le fond de la zone tracée? Merci

chartsgoogle-visualization
28
firebait

passer les options comme ça 

var options = {
    title: 'title',
    width: 310,
    height: 260,
    backgroundColor: '#E4E4E4',
    is3D: true
};
44
uma shankar pandey

ajoutez ceci à vos options:

'chartArea': {
    'backgroundColor': {
        'fill': '#F4F4F4',
        'opacity': 100
     },
 }
11
Kris Lamote

Avez-vous essayé d'utiliser backgroundcolor.stroke et backgroundcolor.strokewidth?

Voir Documentation Google Charts .

2
andypotter

C'est plus facile en utilisant les options.

drawChart() {
    // Standard google charts functionality is available as GoogleCharts.api after load
    const data = GoogleCharts.api.visualization.arrayToDataTable([
        ['Chart thing', 'Chart amount'],
        ['Na Meta', 50],
        ['Abaixo da Meta', 22],
        ['Acima da Meta', 10],
        ['Refugos', 15]
    ]);

    let options = {
      backgroundColor: {
        gradient: {
          // Start color for gradient.
          color1: '#fbf6a7',
          // Finish color for gradient.
          color2: '#33b679',
          // Where on the boundary to start and
          // end the color1/color2 gradient,
          // relative to the upper left corner
          // of the boundary.
          x1: '0%', y1: '0%',
          x2: '100%', y2: '100%',
          // If true, the boundary for x1,
          // y1, x2, and y2 is the box. If
          // false, it's the entire chart.
          useObjectBoundingBoxUnits: true
        },
      },
    };

    const chart = new GoogleCharts.api.visualization.ColumnChart(this.$.chart1);
    chart.draw(data, options);
}

J'utilise un polymère c'est pourquoi j'utilise ce. $. Cart1, mais vous pouvez utiliser selectedbyid sans problème.

2
Emerson Bottero

La bonne réponse est que cela dépend s'il s'agit de Google Charts classique ou de Google Charts Material. Si vous utilisez la version classique de Google Charts, plusieurs des suggestions ci-dessus fonctionnent. Toutefois, si vous utilisez un nouveau type de graphique Google comme type de matériau, vous devez spécifier les options différemment ou les convertir (voir google.charts.Bar.convertOptions(options) ci-dessous). De plus, dans le cas de graphiques en matériau, si vous spécifiez une opacité pour l'ensemble du graphique, l'opacité (uniquement) ne s'appliquera pas à la zone de graphique. Il est donc nécessaire de spécifier explicitement la couleur avec l'opacité pour la zone de graphique, même pour la même combinaison de couleurs.

En général: la version matérielle de Google Charts n’a pas les mêmes fonctionnalités que le Classic (libellés d’axe inclinés, courbes de tendance, coloration personnalisée des colonnes, graphiques combinés, etc.) et vica inversement: la mise en forme du nombre et le double (triple, quadruple, ...) ne sont pris en charge que par la version Matériau.

Dans le cas où une fonctionnalité est prise en charge à la fois, le graphique Matériau nécessite parfois un format différent pour les options.

<body>
  <div id="classic_div"></div>
  <div id="material_div"></div>
</body>

JS:

  google.charts.load('current', { 'packages': ['corechart', 'bar'] });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,    400],
      ['2005',  1170,    460],
      ['2006',   660,   1120],
      ['2007',  1030,    540],
      ['2009',  1120,    580],
      ['2010',  1200,    500],
      ['2011',  1250,    490],
    ]);
    var options = {
      width: 1000,
      height: 600,
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017'
      },
      // Accepts also 'rgb(255, 0, 0)' format but not rgba(255, 0, 0, 0.2),
      // for that use fillOpacity versions
      // Colors only the chart area, simple version
      // chartArea: {
      //   backgroundColor: '#FF0000'
      // },
      // Colors only the chart area, with opacity
      chartArea: {
        backgroundColor: {
          fill: '#FF0000',
          fillOpacity: 0.1
        },
      },
      // Colors the entire chart area, simple version
      // backgroundColor: '#FF0000',
      // Colors the entire chart area, with opacity
      backgroundColor: {
        fill: '#FF0000',
        fillOpacity: 0.8
      },
    }

    var classicChart = new google.visualization.BarChart(document.getElementById('classic_div'));
    classicChart.draw(data, options);

    var materialChart = new google.charts.Bar(document.getElementById('material_div'));
    materialChart.draw(data, google.charts.Bar.convertOptions(options));
  }

Démo Fiddle: https://jsfiddle.net/csabatoth/v3h9ycd4/2/

2
Csaba Toth

Vous pouvez le faire juste avec CSS:  

#salesChart svg > rect {  /*#salesChart is ID of your google chart*/
    fill: #F4F4F4;
}
0
Zahidul Islam Ruhel