如何按月对 Google 图表上的堆积柱形图进行分组

Question

我看过很多分组的柱形图和条形图，我第一次开始使用 Google 图表。

我创建了一个显示 2 年数据的图表，我需要将 2018 年 1 月/2019 年 1 月彼此并排分组，然后将一个缺口分组，同样，将 2 月 18 日/2 月 19 日粘在一起作为柱形图 - 这是吗可能吗？

我有created a JSFiddle for this如果你想看看我的逻辑是否正确

我对数据使用以下格式...

    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

没有任何开箱即用的组选项。

为了在月份对之间创建间隔，
您可以向数据 table、
添加空行在每对之间，例如

['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>

如何按月对 Google 图表上的堆积柱形图进行分组

How to Group a Stacked Column Chart on Google Graphs by Month

graph

charts

google-visualization

grouping

column-chart