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應用程序中的圖表

回答

相關問題