HTML 页面 JS 使用 freemarker list 循环 string 类型时间 赋值给 chart.js 错误的解决方式

Controller 层写法:

 @RequestMapping(value = "/index", method = RequestMethod.GET) public ModelAndView index(HttpSession session, ModelMap map) { Integer uid = (Integer) session.getAttribute("uid"); if (uid == null) { return new ModelAndView("redirect:/user/user/login"); } map.put("menus",menuService.nutrition(uid,BaseUtils.ONE)); return new ModelAndView("user/index"); }

HTML 页面 

  <div class="card">
            <div class="card-header text-uppercase">Line chart</div>
           <div class="card-body">
                 <canvas id="lineChart" height="110"></canvas>
             </div>
          </div>

页面 JS 写法

 var dataChart ={
                        labels : [],
                        datasets : [
                              { label:"卡路里",
                                  backgroundColor: "#6699FF", //背景填充色
                                  borderColor: "#336699", //路径颜色
                                  pointBackgroundColor: "#fff", //数据点颜色
                                  pointBorderColor: "#336699", //数据点边框颜
                                  bezierCurve:false,
                                  pointRadius: 0,
                                  fill: false,
                                  data : [] // 表的Y轴值
                              }
                             
                          ]
                     }
                            <#if menus?? && menus?size != 0>
                                <#list menus as menu>
                               dataChart.labels.push(${menu.dt})
                                dataChart.datasets[0].data.push(${menu.cal})

                                </#list>
                                </#if>
                               

                    var ctx = $("#lineChart");
                    new Chart(ctx,{type: 'line',data:dataChart,options: {}});  

页面显示

修改 JS 写法为:

var dataChart ={
                        labels : [],
                        datasets : [
                              { label:"卡路里",
                                  backgroundColor: "#6699FF", //背景填充色
                                  borderColor: "#336699", //路径颜色
                                  pointBackgroundColor: "#fff", //数据点颜色
                                  pointBorderColor: "#336699", //数据点边框颜
                                  bezierCurve:false,
                                  pointRadius: 0,
                                  fill: false,
                                  data : [] // 表的Y轴值
                              }
                             
                          ]
                     }
                            var list =[];//定义数组
                            <#if menus?? && menus?size != 0>
                                <#list menus as menu>
                               
                                list.push({"dt":"${menu.dt}","cal":"${menu.cal?c}","fat":"${menu.fat?c}","cbd":"${menu.cbd?c}","pro":"${menu.pro?c}","cel":"${menu.cel?c}"})//接收数据

                                </#list>
                                </#if>
                               console.log(list)

                             //赋值
                               for (var i = 0; i < list.length; i++) {
                                dataChart.labels.push(list[i].dt)
                                dataChart.datasets[0].data.push(list[i].cal)
                               }

                    var ctx = $("#lineChart");
                    new Chart(ctx,{type: 'line',data:dataChart,options: {}});  

页面显示