Question

    @RequestMapping("/analytics/iris2")
public String getAvgPetalbySpecies2(Model model) {
    ArrayList<RTestVO> irisList = analyticsService.getAvgPetalBySpecies2();
    Gson gson = new Gson();
    String irisData = gson.toJson(irisList);
    model.addAttribute("irisData", irisData);

    return "analytics/chart";

}

这是我的控制器。所以，我想在图形中可视化＆＃39;本地主机：8080 /命运/分析/视觉＆＃39 ;. 我制作了我的visual.jsp。

    <!-- jQuery -->
<script src="js/jquery.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js">
</script>

 <canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
    <!-- x axis -->
    labels: ["setosa", "versicolor", "virginica"],
    datasets: [{
        label: 'iris species',
        data: [12, 19, 3],  <!-- sample number... I dont want them -->


        <!-- bg -->
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)'
        ],
        <!-- border -->
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)'

        ],
        borderWidth: 1
    }]
},

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}
});
</script>

这是我的visual.jsp，我为chart.js代码。我想使用＆＃34; request.getAttribute（＆＃34; irisData＆＃34;）＆＃34;在visual.jsp。

我的最后一个问题是我在chart.js脚本中插入request.getAttribute（＆＃34; irisData＆＃34;）......

Answer 1

根据我的理解，你需要Spring控制器在你的javascript代码中添加属性model.addAttribute("irisData", irisData);。

你可以试试这个

在您的javascript代码中

<script>
    ...

    var irisData= <c:out value="${irisData}"/> // You can now use irisData in your Chartjs code.

    ...

</script>

可视化虹膜数据集

1 个答案: