SpringBoot - Графики в веб-приложении

Я использую SpringBoot для своего веб-приложения, и я пытаюсь интегрировать некоторые диаграммы на одной из моих страниц. Мне было интересно, может ли кто-нибудь помочь мне или связать мне учебник о том, как правильно установить данные в функции javascript, которая создает диаграмму.SpringBoot - Графики в веб-приложении

Я использую CanvasJS диаграмму и яваскрипт функцию для создания диаграммы выглядит следующим образом

<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()

Строка - это indexLabel, а Long - значение y.

Как передать эту карту функции javascript?

Спасибо.

источник

2015-02-07 QoP

-1

Вы должны преобразовать свою карту в массив javascript ..., который может действовать как карта

источник

2015-05-16 07:37:00

SpringBoot - Графики в веб-приложении

ответ

Смежные вопросы