我在获取所有必要数据后显示我的图表时遇到问题

Question

我的剧本是

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<script>
Morris.Line({
  element: 'line-example',
  data: [
  {% for toto in totos %}
{y:{{toto.dateEffet }} ,a:{{toto.montantTotal }}}
{% endfor %}
  ],
  xkey: 'y',
  ykeys: ['a'],
});
</script>

我的存储库是

 public function TotalContrat()
    {
        $qb = $this->createQueryBuilder('co');

        $qb->select('COUNT(co.id)AS montantTotal')
            ->addSelect('co.dateEffet AS dateEffet ')
            ->groupBy('co.dateEffet')
        ->orderBy('co.dateEffet', 'ASC');

        return $qb->getQuery()->getArrayResult();
    }

而我在控制器中的功能是

public function AccueilAction() {
    $toto =$em->getRepository('Bundle:Contrat')->TotalContrat();
    return $this->render('Bundle:Pages:Accueil.html.twig',array(
        'totalContrat'=>$toto
    )); }

刷新页面后，我无法看到我的图表但是当我在控制台中检查响应时，我看到了这一点

<script>
Morris.Line({
  element: 'line',
  data: [
  {y:2017-08-04 00:00:00.000 ,a:16}
{y:2017-08-09 00:00:00.000 ,a:3}
{y:2017-08-10 00:00:00.000 ,a:11}
{y:2017-08-15 00:00:00.000 ,a:1}
{y:2017-08-16 00:00:00.000 ,a:1}
{y:2017-09-15 00:00:00.000 ,a:2}
  ],
  xkey: 'y',
  ykeys: ['a'],
});
</script>

所以我认为它获取数据并将其放在x和y键上，但它显示在我的树枝中