Charts Web应用程序中的SpringBoot图表_Charts_Spring Boot

Charts Web应用程序中的SpringBoot图表

charts spring-boot

Charts Web应用程序中的SpringBoot图表,charts,spring-boot,Charts,Spring Boot,我正在为我的Web应用程序使用SpringBoot，并试图在我的一个页面中集成一些图表。我想知道是否有人可以帮助我，或者给我链接一个关于如何在创建图表的javascript函数中正确设置数据的教程我正在使用CanvasJS图表和javascript函数创建图表，如下所示 <script type="text/javascript"> window.onload = function () { var chart = new CanvasJS.Chart("chartContaine

我正在为我的Web应用程序使用SpringBoot，并试图在我的一个页面中集成一些图表。我想知道是否有人可以帮助我，或者给我链接一个关于如何在创建图表的javascript函数中正确设置数据的教程

我正在使用CanvasJS图表和javascript函数创建图表，如下所示

<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
  title:{
    text: "Gaming Consoles Sold in 2012"
  },
   data: [
  {
     type: "pie",
   showInLegend: true,
   dataPoints: [
   {  y: 4181563, legendText:"PS 3", indexLabel: "PlayStation 3" },
   {  y: 2175498, legendText:"Wii", indexLabel: "Wii" },
   {  y: 3125844, legendText:"Xbox", indexLabel: "Xbox 360" },
   {  y: 1176121, legendText:"DS" , indexLabel: "Nintendo DS"},
   {  y: 1727161, legendText:"PSP", indexLabel: "PSP" },
   {  y: 4303364, legendText:"3DS" , indexLabel: "Nintendo 3DS"},
   {  y: 1717786, legendText:"Vita" , indexLabel: "PS Vita"}
   ]
 }
 ]
});

chart.render();
}
</script>


window.onload=函数（）{
var chart=new CanvasJS.chart（“chartContainer”，
{
标题：{
文字：“2012年售出的游戏机”
},
数据：[
{
键入：“馅饼”，
showInLegend：是的，
数据点：[
{y:4181563，legendText:“PS 3”，索引标签：“PlayStation 3”}，
{y:2175498，legendText:“Wii”，索引标签：“Wii”}，
{y:3125844，传奇文本：“Xbox”，索引标签：“Xbox 360”}，
{y:1176121，legendText:“DS”，indexLabel:“任天堂DS”}，
{y:1727161，legendText:“PSP”，indexLabel:“PSP”}，
{y:4303364，传奇文本：“3DS”，索引标签：“任天堂3DS”}，
{y:1717786，legendText:“Vita”，索引标签：“PS Vita”}
]
}
]
});
chart.render（）；
}

我打算显示图表的HTML页面如下所示

  <!DOCTYPE HTML>
  <html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title th:text="#{titulo.app}"></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.scrolly.min.js"></script>
    <script src="js/jquery.dropotron.min.js"></script>
    <script src="js/jquery.scrollex.min.js"></script>
    <script src="js/skel.min.js"></script>
    <script src="js/skel-layers.min.js"></script>
    <script src="js/init.js"></script>
    <script src="js/funciones.js"></script>
    <script src="js/jcanvasjs.min.js"></script>

</head>
<body>


    <div class="12u" th:each="valor : ${listValores}">
        </div>



</body>

valor得到了一个方法，它返回一个包含数据的HashMap

public Map<String,Long> returnData()

公共地图返回数据（）

字符串是indexLabel，Long是y值

如何将此映射传递给javascript函数

谢谢。

您应该将地图转换为javascript数组……它可以充当地图