如何使用thymeleaf将@ Map<String中的整数>添加到google api饼图中
如何使用thymeleaf将@ Map<String中的整数>添加到google api饼图中
提问于 2018-07-25 20:21:32
我有一个问题，我不知道如何将我的地图和数据从我的数据库添加到胸腺叶模板的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";
}这是我的视图中的代码:所以我重复一遍，我只需要将“var ageList”赋值给google.visualization.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';
/*]]>*/
// 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>非常感谢你的建议。
回答 1
Stack Overflow用户
发布于 2018-07-26 03:38:05
首先，在使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51518771
复制相关文章
相似问题
腾讯云开发者
