Цвет фона диаграммы Google

Я рисую диаграмму google, используя javascript api. Я хочу изменить фон области, где данные отображаются. По какой-то причине, когда я устанавливаю такие параметры фона:

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

Он изменяет фон всей диаграммы, а не область, где данные отображаются. Любые идеи о том, как только изменить фон участка? Благодаря

Ответы

Ответ 1

передать параметры, подобные этому

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

Ответ 2

добавьте это в свои параметры:

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

Ответ 4

Правильный ответ заключается в том, что это зависит от того, являются ли это классическими графическими картами Google или материальными картами Google. Если вы используете классическую версию Google Charts, несколько из вышеперечисленных предложений. Однако, если вы используете новые диаграммы Google типа материала, вы должны указать параметры по-другому или преобразовать их (см. Ниже google.charts.Bar.convertOptions(options)). Кроме того, в случае материальных карт, если вы укажете непрозрачность для всего графика, непрозрачность (только) не будет применяться к области диаграммы. Поэтому вам нужно явно указать цвет с непрозрачностью для области диаграммы, а также даже для той же цветовой комбинации.

В целом: в материальной версии Google Charts отсутствуют некоторые функции, которые имеет классика (наклонные метки осей, линии тренда, пользовательская раскраска столбцов, комбинированные диаграммы, чтобы назвать несколько), и наоборот: числовое формирование и двойное (тройная, четверная,...) оси поддерживаются только с версией материала.

В случае, если функция поддерживается как в таблице материалов, иногда требуется другой формат для параметров.

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