如何在Google图表中“分组”列？

Question

我对开发很陌生，目前正在开发一个显示Google Charts的JEE网站。 我对大多数图表没有任何问题，但对我来说看起来“不可能”......此图表必须按季度和按部门显示未分类票证的数量。

根据我从DB获得的内容，我的Java类生成一个具有此格式的数组。 ：

  

[“Q2”，“Applications”，115]，[“Q2”，“Datacenter＆amp; Site ops”，343]，   [“Q1”，“Applications”，215]，[“Q1”，“Datacenter＆amp; Site ops”，300]

这是我获取这些数组代码的函数（我正在使用struts2框架）：

private void generateUncategorizedTicketsDept()
{
    /*
     * Generating data for UncategorizedTicketsDept
     */
    ArrayList<QuartUncategorizedTicketsDept> qutdList = new ArrayList<>();

    qutdList = QuartUncategorizedTicketsDeptDAO.getQuarterUncategorizedTicketsDept(year, quarter);

    if (qutdList == null || qutdList.size() == 0)
    {
        addActionError(ERROR_MESSAGE);
    }
    else
    {
        for (QuartUncategorizedTicketsDept qutd : qutdList)
        {           
            //Creating an array to provide to chart
            uncategorizedTicketsDeptData += "[ \"Q" + qutd.getQuarter() + "\", \"" + qutd.getDepartmentName() 
            + "\", " + qutd.getUncategorizedTicketsNb()
            + " ],";
        }
    }
    //Delete last comma in the arrays list
    uncategorizedTicketsDeptData = Utils.deleteLastComma(uncategorizedTicketsDeptData);
}

这是我的JS代码（你可以看到图表在季度评论时工作正常）：

    /*
//Uncategorized tickets by department chart
 */
google.charts.load('current', {
    packages : [ 'corechart', 'bar' ]
});
$(document).ready(google.charts.setOnLoadCallback(drawAxisUncategorizedTickColors));

function drawAxisUncategorizedTickColors() {

    // Get chart data from HTML page and put it into an array
    var uncategorizedTicketsDeptData = $("span#uncategorizedTicketsDeptData").text();
    var arrayUncategorizedTicketsDeptData = JSON.parse("[" + uncategorizedTicketsDeptData.trim() + "]");

    var data = new google.visualization.DataTable();
//  data.addColumn('string', 'Quarter');
    data.addColumn('string', 'Department');
    data.addColumn('number', 'Uncategorized tickets ');

    //Create chart row
//  data.addRows([
//      [ "Q2", "Applications", 115 ],[ "Q2", "Datacenter & Site ops", 343 ],
//      [ "Q1", "Applications", 215 ],[ "Q1", "Datacenter & Site ops", 300 ]
//      ]);
    data.addRows([
        [ "Applications", 115 ],[ "Datacenter & Site ops", 343 ],
        [ "Applications", 215 ],[ "Datacenter & Site ops", 300 ]
        ]);
//  data.addRows(arrayUncategorizedTicketsDeptData);

    //Sort by quarter, then by top uncategorized department
    data.sort({column: 0, desc: true}, {column: 2, desc: true});

    //Create a view for bars annotations
    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
        calc: 'stringify',
        sourceColumn: 1,
        type: 'string',
        role: 'annotation'
    }]);


    var options = {
      chart: {
        title: 'Uncategorized tickets by Department',
      },
      bars: 'horizontal' // Required for Material Bar Charts.
    };

    var chart = new google.visualization.BarChart(document.getElementById('uncategorizedTicketsByDeptChart_div'));

    chart.draw(view, options);

};

我的问题是，我可以按季度显示未分类的门票，或按部门显示未分类的门票，但我无法将部门“按季度”分组。 我发现这个主题看起来像我的问题，但我无法按季度获得图表，只有一个部门的栏目...

你知道我该怎么做吗？ 谢谢你的帮助。

修改 添加了我的图表片段和预期图表的图像。

/*
//Uncategorized tickets by department chart
 */
google.charts.load('current', {
	packages : [ 'corechart', 'bar' ]
});
$(document).ready(google.charts.setOnLoadCallback(drawAxisUncategorizedTickColors));

function drawAxisUncategorizedTickColors() {

	// Get chart data from HTML page and put it into an array
	var uncategorizedTicketsDeptData = $("span#uncategorizedTicketsDeptData").text();
	var arrayUncategorizedTicketsDeptData = JSON.parse("[" + uncategorizedTicketsDeptData.trim() + "]");

	var data = new google.visualization.DataTable();
//	data.addColumn('string', 'Quarter');
	data.addColumn('string', 'Department');
	data.addColumn('number', 'Uncategorized tickets ');

	//Create chart row
//	data.addRows([
//		[ "Q2", "Applications", 115 ],[ "Q2", "Datacenter & Site ops", 343 ],
//		[ "Q1", "Applications", 215 ],[ "Q1", "Datacenter & Site ops", 300 ]
//		]);
	data.addRows([
		[ "Applications", 115 ],[ "Datacenter & Site ops", 343 ],
		[ "Applications", 215 ],[ "Datacenter & Site ops", 300 ]
		]);
//	data.addRows(arrayUncategorizedTicketsDeptData);
	
	//Sort by quarter, then by top uncategorized department
	data.sort({column: 0, desc: true}, {column: 2, desc: true});

	//Create a view for bars annotations
	var view = new google.visualization.DataView(data);
	view.setColumns([0, 1, {
	    calc: 'stringify',
	    sourceColumn: 1,
	    type: 'string',
	    role: 'annotation'
	}]);
	

    var options = {
      chart: {
        title: 'Uncategorized tickets by Department',
      },
      bars: 'horizontal' // Required for Material Bar Charts.
    };

    var chart = new google.visualization.BarChart(document.getElementById('uncategorizedTicketsByDeptChart_div'));

    chart.draw(view, options);

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


<hr>
<div id="uncategorizedTicketsByDeptChart_div" style="width: 90%; height: 500px; padding: 10px;"></div>
<hr>

以下是我想要做的一个示例（在2分钟内完成Excel）： Excel chart