webentwicklung-frage-antwort-db.com.de

Google Chart-Hintergrundfarbe

Ich stelle ein Google-Diagramm mit der Javascript-API. Ich möchte den Hintergrund des Bereichs ändern, in dem die Daten dargestellt werden. Aus irgendeinem Grund, wenn ich die Hintergrundoptionen so setze:

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

Sie ändert den Hintergrund des gesamten Diagramms und nicht den Bereich, in dem die Daten gezeichnet werden. Irgendwelche Ideen, wie man nur den Hintergrund des gezeichneten Bereichs ändert? Danke

28
firebait

pass die Optionen so 

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

fügen Sie dies Ihren Optionen hinzu:

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

Haben Sie es mit backgroundcolor.stroke und backgroundcolor.strokewidth versucht?

Siehe Google Charts-Dokumentation .

2
andypotter

Es ist einfacher, die Optionen zu verwenden.

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);
}

Ich verwende Polymer, deshalb verwende ich dieses. $. Cart1, aber Sie können selectedbyid verwenden, kein Problem.

2
Emerson Bottero

Die richtige Antwort ist, dass es darauf ankommt, ob es sich um klassische Google-Charts oder Material-Google-Charts handelt. Wenn Sie die klassische Version von Google Charts verwenden, funktionieren mehrere der oben genannten Vorschläge. Wenn Sie jedoch neuere Materialtypen von Google-Diagrammen verwenden, müssen Sie die Optionen anders angeben oder konvertieren (siehe unten google.charts.Bar.convertOptions(options)). Darüber hinaus gilt bei Materialdiagrammen, wenn Sie eine Deckkraft für das gesamte Diagramm festlegen, die Deckkraft (nur) nicht für den Diagrammbereich. Daher müssen Sie die Farbe für die Diagrammfläche auch für die gleiche Farbkombination explizit angeben.

Im Allgemeinen: In der Materialversion von Google Charts fehlen einige der Funktionen des Classic (geneigte Achsenbeschriftungen, Trendlinien, benutzerdefinierte Kolonnenfarbe, Combo-Diagramme, um nur einige zu nennen) und umgekehrt: die Zahlenformierung und die Dual-Version (dreifach 4-fach, ...) Achsen werden nur mit der Materialversion unterstützt.

Wenn eine Funktion von beiden unterstützt wird, erfordert das Materialdiagramm manchmal ein anderes Format für die Optionen.

<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));
  }

Geige Demo: https://jsfiddle.net/csabatoth/v3h9ycd4/2/

2
Csaba Toth

If you want to do like this then it will help

Wenn Sie dies tun möchten, wird es helfen. Ich benutze stepped area Diagramm im Kombinationsdiagramm aus der Google-Bibliothek ... wobei die Werte für jeden abgestuften Bereich der Wert für Teilstriche sind.

Hier ist der Link für jsfiddle code

1
Vikas Rinvi

Sie können es nur mit CSS machen:  

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