将数据从Controller传递到ChartJS [英] Passing Data from Controller to ChartJS
问题描述
我正在尝试使用ChartJS从Controller传递数据以馈送图表，但是当我使用keySet函数作为标签时，该图表无法呈现。
I am trying to pass data from Controller to feed a chart using ChartJS, but when I use a keySet function as labels, the chart is not rendering.
此是来自控制器的方法：
This is the Method from Controller:
@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>
未渲染图表，这是我检查源代码时的输出：
The chart is not been rendered and this is the output when I check the source code:
<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（）似乎没有以String形式获取值。
It seems that the function keySet() is not getting values as String.
如何调整它以将值显示为String，然后呈现为Label？
How can I adjust it to show the values as String and then rendered as Labels?
注意，
推荐答案
我遇到了类似的问题，发现我们应该使用 Object.keys（data）而不是 data.keySet（）。因此，下面是使用它的方式
I faced similar problem and found that we should use Object.keys(data) instead of data.keySet(). So below is the way you can use it
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
Also your javascript is not thymeleaf readable. Please add th:inline=javascript in script tag and provide CDATA as below
<script th:inline="javascript">
/*<![CDATA[*/
// Here goes my previous script
/*]]>*/
</script>
这篇关于将数据从Controller传递到ChartJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
