Couleur De Fond Du Graphique De Google

j'utilise l'api javascript pour concevoir un graphique google. Je veux changer le contexte de la zone où les données sont tracées. Pour une raison que lorsque j'ai mis les options d'arrière-plan comme ceci:

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

il change le fond de la carte entière et non la zone où les données sont tracées. Des idées sur la façon de changer seulement l'arrière-plan de la zone tracée? Merci

24
demandé sur firebait 2012-01-10 22:00:54
la source

6 ответов

passer les options comme ceci

var options = {
    title: 'title',
    width: 310,
    height: 260,
    backgroundColor: '#E4E4E4',
    is3D: true
};
42
répondu uma shankar pandey 2012-10-06 07:32:47
la source

ajouter à vos options:

'chartArea': {
    'backgroundColor': {
        'fill': '#F4F4F4',
        'opacity': 100
     },
 }
9
répondu Kris Lamote 2013-01-31 20:27:38
la source

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

Voir Google Charts documentation.

2
répondu andypotter 2016-11-10 01:25:29
la source

la bonne réponse est que cela dépend si C'est classic Google Charts ou matériel Google Charts. Si vous utilisez la version classique des cartes Google, plusieurs des suggestions ci-dessus fonctionnent. Cependant, si vous utilisez des cartes Google plus récentes, vous devez spécifier les options différemment, ou les convertir (voir google.charts.Bar.convertOptions(options) ci-dessous). En plus de cela dans le cas d'œuvres graphiques si vous spécifiez une opacité pour l'ensemble du graphique, l'opacité (uniquement) ne s'appliquent pas pour la zone de graphique. Donc, vous devez explicitement spécifiez la couleur de l'opacité de la zone de graphique, et même pour la même combinaison de couleurs.

en général: la version matérielle de Google Charts manque de certaines des caractéristiques de ce que le Classic A (étiquettes axiales inclinées, lignes de tendance, coloriage colonne personnalisé, Combo charts pour n'en nommer que quelques-uns), et vice versa: le nombre formating et le dual (triple, quadruple,...) axes ne sont supportés que par la version matérielle.

dans le cas où une fonctionnalité est supportée à la fois par le graphique Matériel 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));
  }

Violon démo: https://jsfiddle.net/csabatoth/v3h9ycd4/2/

2
répondu Csaba Toth 2017-11-29 21:00:51
la source

il est plus facile d'utiliser 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 du polymère c'est pourquoi j'utilise ceci.$.cart1, mais vous pouvez utiliser selectedbyid, pas de problème.

1
répondu Emerson Bottero 2018-09-18 22:53:04
la source

il suffit d'ajouter l'option background

  backgroundColor: {
        fill:'red'     
        },

voici le violon lien https://jsfiddle.net/amitjain/q3tazo7t/

-3
répondu amit jain 2016-08-11 16:34:58
la source

Autres questions sur