Question

我正在使用javascript api设计谷歌图表。我想更改绘制数据的区域的背景。出于某种原因，我设置了这样的背景选项：

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

它会更改整个图表的背景，而不会更改绘制数据的区域。关于如何仅改变绘图区域背景的任何想法？感谢

Answer 1

传递像这样的选项

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

Answer 2

将此添加到您的选项中：

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

Answer 3

It is easier using the 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);
}

I'm using polymer that's why i'm using this.$.cart1, but you can use selectedbyid, no problem.

Answer 4

您是否尝试过使用backgroundcolor.stroke和backgroundcolor.strokewidth？

请参阅Google Charts documentation。

Answer 5

正确的答案是，这取决于它是经典的Google Charts还是Material Google Charts。如果您使用经典版Google图表，则上述建议的多个工作正常。但是，如果您使用较新的材质类型Google图表，则必须以不同方式指定选项，或转换它们（请参阅下面的google.charts.Bar.convertOptions(options)）。最重要的是，如果为整个图表指定不透明度，则在材质图表的情况下，不透明度（仅）不适用于图表区域。因此，您需要使用图表区域的不透明度明确指定颜色，即使是相同的颜色组合也是如此。

一般来说：Google图表的素材版本缺少Classic所具有的一些功能（倾斜的轴标签，趋势线，自定义列着色，Combo图表等等），反之亦然：数字格式化和双重（三重，四重......）轴仅支持材料版本。

如果材料图表同时支持某项功能，则有时需要使用不同的选项格式。

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

小提琴演示：https://jsfiddle.net/csabatoth/v3h9ycd4/2/

Answer 6

如果您想这样做，那么它将有所帮助。我在Google图书馆的组合图表中使用stepped area图表... 每个阶梯区域的值都是刻度的值。

这是jsfiddle code

的链接

Answer 7

您可以使用CSS来做到这一点：

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

Answer 8

只需添加背景选项

  backgroundColor: {
        fill:'red'     
        },

这里是小提琴链接https://jsfiddle.net/amitjain/q3tazo7t/

谷歌图表背景颜色

8 个答案: