将数据从控制器传递到chartjs

guykilcj 于 2021-07-26 发布在 Java

关注(0)|答案(1)|浏览(374)

我试图用chartjs将数据从控制器传递给图表，但是当我使用keyset函数作为标签时，图表不会呈现。
这是控制器的方法：

@GetMapping("/reports")
    public String showDashboard(Model model) {
        Map<String, Integer> data = new LinkedHashMap<String, Integer>();
        data.put("JAVA", 50);
        data.put("Ruby", 20);
        data.put("Python", 30);

        model.addAttribute("data", data);
        return "reports";
    }

这是html代码：

<pre>
<body>
<div class="container">
    <div th:replace="fragments/navbar :: top"></div>

    <div class="row" style="margin-top: 60px">

        <div class="chart-container" style="margin: 0 auto; height:20vh; width:40vw">
            <canvas id="myChart"></canvas>
        </div>
        <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: [[${data.keySet()}]],
                datasets: [{
                    data: [[${data.values()}]],
                    backgroundColor: [
                        'rgb(0,255,255)',
                        'rgb(46,139,87)',
                        'rgb(255,165,0)'
                    ],
                    borderColor: [
                        'rgb(0,255,255)',
                        'rgb(46,139,87)',
                        'rgb(255,165,0)'
                    ],
                    borderWidth: 1
                }]
            },
        });
        </script>

    </div>

</div>

</body>
</pre>

图表未呈现，这是我检查源代码时的输出：

<pre>

<script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: [JAVA, Ruby, Python],
                datasets: [{
                    data: [50, 20, 30],
                    backgroundColor: [
                        'rgb(0,255,255)',
                        'rgb(46,139,87)',
                        'rgb(255,165,0)'
                    ],
                    borderColor: [
                        'rgb(0,255,255)',
                        'rgb(46,139,87)',
                        'rgb(255,165,0)'
                    ],
                    borderWidth: 1
                }]
            },
        });
        </script>
</pre>

似乎函数keyset（）没有将值作为字符串获取。
如何调整它以将值显示为字符串，然后呈现为标签？
当做，

spring spring-mvc chart.js

来源：https://stackoverflow.com/questions/58887502/passing-data-from-controller-to-chartjs

1条答案

按热度按时间

slwdgvem1#

我遇到了类似的问题，发现我们应该使用 Object.keys(data) 而不是 data.keySet() . 下面是你可以使用它的方法

var htmldata = [[${data}]];
var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: Object.keys(htmldata),
            datasets: [{
                data: Object.keys(htmldata).map(function(key) {return htmldata[key];}),
                backgroundColor: [
                    'rgb(0,255,255)',
                    'rgb(46,139,87)',
                    'rgb(255,165,0)'
                ],
                borderColor: [
                    'rgb(0,255,255)',
                    'rgb(46,139,87)',
                    'rgb(255,165,0)'
                ],
                borderWidth: 1
            }]
        },
    });

另外，javascript不可读。请在脚本标记中添加th:inline=javascript并提供如下cdata

<script th:inline="javascript">   
  /*<![CDATA[*/
       // Here goes my previous script
  /*]]>*/
</script>

赞(0）回复(0）举报 2021-07-26

我来回答

将数据从控制器传递到chartjs

1条答案

相关问题

热门标签

最新问答