Цвет фона Google Chart - PullRequest
Новая
       4

Цвет фона Google Chart

30 голосов
/ 10 января 2012

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

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

Это меняет фон всей диаграммы, а не область, где отображаются данные.Любые идеи о том, как изменить только фон закрашенной области?Спасибо

Ответы [ 8 ]

49 голосов
/ 20 августа 2012

передать опции, подобные этой 

var options = {
    title: 'title',
    width: 310,
    height: 260,
    backgroundColor: '#E4E4E4',
    is3D: true
};
12 голосов
/ 31 января 2013

добавить это к вашим опциям: 

'chartArea': {
    'backgroundColor': {
        'fill': '#F4F4F4',
        'opacity': 100
     },
 }
3 голосов
/ 18 сентября 2018

С опциями проще. 

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

Я использую полимер, поэтому я использую это. $. Cart1, но вы можете использовать selectedbyid, без проблем.

3 голосов
/ 06 октября 2017

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

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

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

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

Демонстрация Fiddle: https://jsfiddle.net/csabatoth/v3h9ycd4/2/

2 голосов
/ 10 мая 2012

Вы пробовали использовать backgroundcolor.stroke и backgroundcolor.strokewidth?

См. Документация Google Charts .

1 голос
/ 23 апреля 2019

If you want to do like this then it will help

Если вы хотите сделать это, то это поможет.Я использую stepped area диаграмму в комбинированной диаграмме из библиотеки Google ... где значения для каждой ступенчатой ​​области - это значение для тиков.

Вот ссылка для код jsfiddle

0 голосов
/ 27 октября 2018

Вы можете сделать это просто с помощью CSS: 

#salesChart svg > rect {  /*#salesChart is ID of your google chart*/
    fill: #F4F4F4;
}
0 голосов
/ 11 августа 2016

Просто добавьте опцию фона 

  backgroundColor: {
        fill:'red'     
        },

вот ссылка на скрипку https://jsfiddle.net/amitjain/q3tazo7t/

...