SpringBoot - Web应用程序中的图表

我正在使用SpringBoot作为我的Web应用程序，我试图在一个页面中集成一些图表。我想知道是否有人能够帮助我，或者联系我一本关于如何在创建图表的javascript函数中正确设置数据的教程。SpringBoot - Web应用程序中的图表

我使用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>

和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>

而'勇气'有一个方法返回一个HashMap的数据

public Map<String,Long> returnData()

String是indexLabel，Long是y值。

如何将此地图传递给javascript函数？

谢谢。

来源

2015-02-07 QoP

-1

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

来源

2015-05-16 07:37:00

SpringBoot - Web应用程序中的图表

回答

相关问题