如何使用百里香叶将我的地图<字符串、整数>从我的@Controller添加到谷歌 API 饼图

Question

我遇到了一个问题，我不知道如何将我的Map和数据库中的数据添加到Thymelaf模板中的google.visualization.arrayToDataTable中。

我成功地用控制台日志在视图中显示了地图，但我的问题是如何将其添加到google.visualization.arrayToDataTable.

这是我来自@Controller 的代码

@GetMapping("/pourcentageAges")
public String ageDesClients(Model model){
Map<String,Integer>listeAgesTranches = 
utilisateurMetier.agesClientsClub();
System.out.println("je suis la tailme de la liste 
"+listeAgesTranches.size());

model.addAttribute("liste",listeAgesTranches);
model.addAttribute("tailleListe",listeAgesTranches.size());
return "utilisateur/agePourcentage";
}

这是我的代码：所以我重复一遍，我只需要将"varageList"分配给谷歌。可视化。数组到数据表

<script type="text/javascript" th:inline="javascript" >
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

/*<![CDATA[*/
var ageList=new Map();
var tailleListe= /*[[${tailleListe}]]*/
ageList= /*[[${liste}]]*/ 'default';


/*]]>*/
// Draw the chart and set the chart values

// for (i=0; i<tailleListe;i++){
//     console.log('je suis la'+[Object.keys(message)[i],Object.values(message)[i]])
// }
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'ages between 16 and 90 group by 10'],
['age betweeen 20-30',5 ]
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'Ages en pourcent de 16 a 90 ans', 'width':550, 
'height':400,is3D: true};
// Display the chart inside the <div> element with id="piechart"
var chart = new 
google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>

非常感谢你的建议。

Answer 1

首先，在使用arrayToDataTable
之前创建一个新数组，然后可以使用concat方法将列标题与ageList
组合，然后将新数组传递给arrayToDataTable

试着这样。。。

<script type="text/javascript" th:inline="javascript" >
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
/*<![CDATA[*/
var ageList=new Map();
var tailleListe= /*[[${tailleListe}]]*/
ageList= /*[[${liste}]]*/ 'default';
/*]]>*/
function drawChart() {
var dataArray = [
['Task', 'ages between 16 and 90 group by 10']
];
dataArray = dataArray.concat(ageList);
var data = google.visualization.arrayToDataTable(dataArray);
// Optional; add a title and set the width and height of the chart
var options = {'title':'Ages en pourcent de 16 a 90 ans', 'width':550, 'height':400,is3D: true};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>