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

Question

我正在考虑使用PHP实现Google Charts的API来进行一些统计，目前有一些图形，但是它们是使用CSS直接开发的，以提供美观的外观：

找到Google Chart之后，我正在考虑使用API​​设计相同图形的可能性，问题在于，在图形的每一列中将其分为三个部分，我必须在图形中以分组的方式进行报告。

在Google documentation中，我看不到类似的示例，但我认为JSON具有类似于以下的结构：

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 .....
            ]);

我必须在每列中显示“早晨”，“夜晚”和“星期天”的类别，我所需要的只是了解JSON的结构以及使用API​​的外观，但我看不到正确的解释方式，或者至少我没有找到讲解类似案例的教程，有人开发过类似图形的教程或指南吗？

谢谢！ ：）

Answer 1

获取早晨，夜晚和星期日的详细信息以显示在列上方，
需要使用'tooltip' column role。
工具提示列采用'string'数据类型。

请参阅以下工作片段...

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\n1,000 in the night\n10 Sundays', 580, '20 in the Morning\n5000 in the night\n60 Sundays', 62, '40 in the Morning\n10 in the night\n12 Sundays'],
    ['February', 350, '30 in the Morning\n300 in the night\n20 Sundays', 143, '22 in the Morning\n60 in the night\n61 Sundays', 145, '90 in the Morning\n33 in the night\n22 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>