是否可以使用Google Charts创建图形，其中每列有多个类别？

Question

I'm thinking of implementing the API of Google Charts with PHP to do some statistics, currently there are some graphics but they are developed with CSS directly to give a nice appearance:

After finding Google Chart I was thinking about the possibility of designing the same graph using the API, the problem is that in each column of the graph it is divided into three sections which I must report in a grouped way in the graph.

In the Google documentation I can not see a similar example, but I think the JSON would have a structure similar to this:

var data = google.visualization.arrayToDataTable
            ([
              ['Month', 'Boards', 'Chairs', 'Speakers'],
              ['January',  {'Morning':80, 'Night':1000, 'Sunday':10}, {'Morning':20, 'Night':500, 'Sunday':60}, {'Morning':40, 'Night':10, 'Sunday':12}],
              ['February', {'Morning':30, 'Night':300, 'Sunday':20}, {'Morning':22, 'Night':60, 'Sunday':61}, {'Morning':90, 'Night':33, 'Sunday':22}],
              ['March']   etc .....
            ]);

I must show the categories of "Morning", "Night" and "Sunday" in each column, all I need is to know the structure of the JSON and how it looks visually using the API, but I can not see the correct way to interpret it or at least I have not found a tutorial where I explain a similar case, does anyone have a tutorial or guide to develop a similar graphic?

Thanks! :)

Answer 1

to get the details of Morning, Night, & Sunday to display above the columns,
need to use a 'tooltip' column role.
the tooltip column takes a 'string' data type.

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Boards', {type: 'string', role: 'tooltip'}, 'Chairs', {type: 'string', role: 'tooltip'}, 'Speakers', {type: 'string', role: 'tooltip'}],
    ['January', 1090, '80 in the Morning
1,000 in the night
10 Sundays', 580, '20 in the Morning
5000 in the night
60 Sundays', 62, '40 in the Morning
10 in the night
12 Sundays'],
    ['February', 350, '30 in the Morning
300 in the night
20 Sundays', 143, '22 in the Morning
60 in the night
61 Sundays', 145, '90 in the Morning
33 in the night
22 Sundays'],
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  var options = {
    colors: ['#ffa726', '#7e57c2', '#7cb342'],
    height: 400,
    legend: {
      position: 'bottom'
    },
    tooltip: {
      trigger: 'both'
    }
  };

  // add selection to make tooltip visible when drawn
  google.visualization.events.addListener(chart, 'ready', function () {
    chart.setSelection([{row: 0, column: 1}]);
  });

  chart.draw(data, options);
});

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

</div>