如何使用 thymeleaf 将我的 Map<String, Integer > 从我的 @Controller 添加到 google api 饼图

Question

我有一个问题，我不知道如何将包含我数据库中的数据的地图添加到 Thymeleaf 模板中的 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>

非常感谢您的任何建议。

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>