Javascript 如何使用charts.js和symfony 3制作图形

在这里，我希望在我的管理仪表板中有charts.js的图表。这些图表应该包括注册医生的数量、预约的数量，最后是接受预约的数量。为此，我选择了图表类型的饼图，它将所有三个都分组。 这是我的控制器，我可以从中获取注册医生、预约和荣誉预约的数量：

   public function indexAction(Request $request)
{

    // on recuppere le user connecte ensuite on met dans la session toutes les infos conncernant le medecin
    $user = $this->getUser();
    if ($user === null) {
        throw new NotFoundHttpException('Utilisateur Inexistant');
    } else {

        $em = $this->getDoctrine()->getManager();
        $medecin = $em->getRepository('DoctixMedecinBundle:Medecin')->findAll();
        $booking = $em->getRepository('DoctixFrontBundle:Booking')->findAll();

        $session = $request->getSession();
        $session->set('medecin', $medecin);
        $session->set('booking', $booking);


        $nbdoc = $em->createQuery('SELECT COUNT(m.id) AS nbr_doc FROM DoctixMedecinBundle:Medecin m ')
            ->getResult();

         $nbbookings =  $em->createQuery('SELECT COUNT(b.id) AS nbr_booking FROM DoctixFrontBundle:Booking b ')
            ->getResult();

          $nbbookhonored = $em->createQuery('SELECT COUNT(b.id) AS nbr_booking_honored FROM DoctixFrontBundle:Booking b WHERE b.statut like :approved ')
            ->setParameter('approved','approved') 
            ->getResult(); 


    return $this->render('DoctixAdminBundle:Admin:index.html.twig', array(
                'nbdoc' => $nbdoc,
                'nbbookings' => $nbbookings,
                'nbbookhonored' => $nbbookhonored
             ));
   }
}

树枝文件

<h2></h2>
<div class="box_general padding_bottom">
    <div class="header_box version_2">
        <h2><i class="fa fa-bar-chart"></i>Statistiques</h2>
    </div>
    <canvas id="myAreaChart" width="100%" height="30" style="margin:45px 0 15px 0;"></canvas> 
</div>
<div class="row">
    <div class="col-lg-4">
        <!-- Example Pie Chart Card-->
        <div class="card mb-3">
            <div class="card-header">
                <i class="fa fa-pie-chart"></i> Pie Chart Example</div>
            <div class="card-body">
                 <canvas id="myPieChart" width="100%" height="100"></canvas>
            </div>
        </div>
    </div>
</div>

<div id="datas" data-items="{{ nbdoc|json_encode }}"></div>
<div id="datas" data-items="{{ nbbookings|json_encode }}"></div>
<div id="datas" data-items="{{ nbbookhonored|json_encode }}"></div>

---

你还可以写下你的

nbrdoc，nbrbooking，nbbookorded

，变量的结果吗？嗨@Alien，我已经更新了我的帖子，添加了nbrdoc，nbrbooking，nbbookorded的结果。嗨，正如我看到的，你有哈希数组，你正试图添加到图表数据中，因为图表不是那么聪明，你只需要以

[4，27，1]的格式发送数据

。我不确定一个数组中是否会有更多相同的元素？如果这与现在一样，您应该获得类似于

nbrdoc[0][“nbr_doc”]

的数据，然后您将获得numer，对所有3个都执行相同的操作。如果你想在一个多，那么你需要映射数字和总和。试着玩一点：）嗨@Alien，我试过你的评论，但我仍然没有显示我的图形Hi，你在代码中有一些错误，当代码段运行时，它给出错误

“消息”：“未捕获的语法错误：标识符'jsondata'已经声明过”

两次声明相同的var

jsondata