Как сгруппировать диаграмму с накоплением столбцов на графиках Google по месяцам

Question

Я видел много столбчатых и столбчатых диаграмм, которые сгруппированы, и я впервые начал использовать Google Графики.

Я создал диаграмму, показывающую данные за 2 года, и мне нужно сгруппировать январь 2018 г. / январь 2019 г. рядом друг с другом, а затем разрыв и аналогично, с 18 февраля по 19 февраля, соединенные вместе в виде столбчатых диаграмм - этоэто возможно?

Я создал JSFiddle для этого , если вы хотите взглянуть и проверить правильность моей логики.

Я использую следующий формат дляданные ...

    var monthdata = google.visualization.arrayToDataTable([
  ['Month', 'Money Received', 'Money Outstanding', 'Still to be invoiced', 'Ahead of Budget Achieved'],
  ['January 2019', 9145.600, 1000.400, 0, 900.4],
  ['January 2018', 8123.100, 0, 0, 0],
  ['February 2019', 7030.700, 200.300, 999.75, 0],
  ['February 2018', 7311.190, 0, 0, 0]])

и т. д. (полный код в разделе JSFilddle)

большое спасибо заранее.

Answer 1

нет доступных групповых опций.

чтобы создать разрыв между парами месяцев,
вы можете добавить пустые строки в таблицу данных,
между каждой парой, например,

['January 2019', 9145.600, 1000.400, 0, 900.4],
['January 2018', 8123.100, 0, 0, 0],
[null, null, null, null, null],
['February 2019', 7030.700, 200.300, 999.75, 0],
['February 2018', 7311.190, 0, 0, 0],
[null, null, null, null, null],
['March 2019', 8784.600, 1000.000, 0, 0],
['March 2018', 9945.200, 0, 0, 0],

, чтобы вывестипары месяцев ближе друг к другу,
вы можете использовать опцию bar.groupWidth ...

bar: {
  groupWidth: '90%'
},

см. следующий рабочий фрагмент ...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

function drawChart() {
  var monthdata = google.visualization.arrayToDataTable([
    ['Month', 'Money Received', 'Money Outstanding', 'Still to be invoiced', 'Ahead of Budget Achieved'],
    ['January 2019', 9145.600, 1000.400, 0, 900.4],
    ['January 2018', 8123.100, 0, 0, 0],
    [null, null, null, null, null],
    ['February 2019', 7030.700, 200.300, 999.75, 0],
    ['February 2018', 7311.190, 0, 0, 0],
    [null, null, null, null, null],
    ['March 2019', 8784.600, 1000.000, 0, 0],
    ['March 2018', 9945.200, 0, 0, 0],
    [null, null, null, null, null],
    ['April 2019', 11398.300, 1019.8300, 0, 1139.83],
    ['April 2018', 9878.500, 0, 0, 0],
    [null, null, null, null, null],
    ['May 2019', 8486.800, 524.670, 1586.44, 0],
    ['May 2018', 12050.300, 0, 0, 0],
    [null, null, null, null, null],
    ['June 2019', 10186.0100, 1000.4000, 423.3, 0],
    ['June 2018', 10321.120, 0, 0, 0],
    [null, null, null, null, null],
    ['July 2019', 11287.2200, 1823.8800, 0, 1212.99],
    ['July 2018', 11555.000, 0, 0, 0],
    [null, null, null, null, null],
    ['August 2019', 8491.1600, 892.1200, 2197.88, 0],
    ['August 2018', 11288.120, 0, 0, 0],
    [null, null, null, null, null],
    ['September 2019', 6496.3300, 4221.3200, 0, 132.44],
    ['September 2018', 13892.500, 0, 0, 0],
    [null, null, null, null, null],
    ['October 2019', 4905.5300, 2121.1200, 1878.88, 0],
    ['October 2018', 8723.100, 0, 0, 0],
    [null, null, null, null, null],
    ['November 2019', 3296.7000, 1834.1200, 3165.88, 0],
    ['November 2018', 7011.700, 0, 0, 0],
    [null, null, null, null, null],
    ['December 2019', 5110.1000, 1200.3600, 0, 1310.46],
    ['December 2018', 9382.500, 0, 0, 0]
  ]);

  var options = {
    bar: {
      groupWidth: '90%'
    },
    title: 'Invoicing and Revenue',
    isStacked: 'true',
    legend: {
      position: 'top',
      alignment: 'start'
    },
    tooltip: {
      isHtml: true
    },
    hAxis: {
      titleTextStyle: {
        color: '#78909c'
      },
      hAxis: {
        title: 'Date'
      },
      slantedText: true,
      slantedTextAngle: 70,
      gridlines: {
        count: 24
      },
    },
    vAxis: {
      minValue: 0,
      gridlines: {
        color: '#cfd8dc',
        count: 4
      },
      vAxis: {
        title: '€'
      },
      title: '€',
      titleTextStyle: {
        color: '#78909c'
      },
      baselineColor: 'transparent',
      textStyle: {
        color: '#1a71a8',
        fontName: 'Roboto',
        fontSize: '9',
        bold: true
      }
    },
    colors: ["#1a71a8", "#7b848e", "#c65217", "#73721c"],
    backgroundColor: '#ffffff',
    chartArea: {
      backgroundColor: "#ffffff",
      width: '88%',
      height: '68%'
    },
    animation: {
      duration: 1200,
      easing: 'linear',
      startup: true
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('containerx'));
  chart.draw(monthdata, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="containerx"></div>