如何使用Charts.js和Symfony 3制作图形

Question

我想在这里使用Charts.js在管理仪表盘中显示图形，图形应包括注册医生的数量，约会的数量以及最终兑现的约会的数量，为此II选择了图表类型饼图，它将全部三个分组。 这是我的控制人，负责获取注册医生，任命和尊敬任命的人数：

   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>

Charts.js

// Chart.js scripts
// -- Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
Chart.defaults.global.title.display = true;
Chart.defaults.global.title.text = "Evolution de mes Rendez-vous";
Chart.defaults.global.elements.point.radius = 5 ;
// -- Area Chart Example
var ctx = document.getElementById('myAreaChart').getContext('2d');

let root = document.querySelector("#datas");
let jsondata = root.dataset.items
jsondata = JSON.parse(jsondata)
 
tabMedecins =[]
tabMois =[]
jsondata.forEach( val =>{
    tabMedecins.push(val.nbr_rdv)
    tabMois.push(val.mois)
})

console.log("Nb de RDVs="+ tabMedecins);
console.log("Mois="+ tabMois);

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: tabMedecins, 
        datasets: [{
            label: "Le nombre de RDVs/mois",
            lineTension: 0.3,
            backgroundColor: "rgba(2,117,216,0.2)",
            borderColor: "rgba(2,117,216,1)",
            pointRadius: 5,
            pointBackgroundColor: "rgba(2,117,216,1)",
            pointBorderColor: "rgba(255,255,255,0.8)",
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(2,117,216,1)",
            pointHitRadius: 20,
            pointBorderWidth: 2,
            data: tabMois,
        }],
    },
    options: {
        scales: {
            xAxes: [{
                time: {
                    unit: 'date'
                },
                gridLines: {
                    display: false
                },
                ticks: {
                    maxTicksLimit: 5
                }
            }],
            yAxes: [{
                ticks: {
                    min: 0,
                    max: 12,
                    maxTicksLimit: 5
                },
                gridLines: {
                    color: "rgba(0, 0, 0, .125)",
                }
            }],
        },
        legend: {
            display: true
        }
    }
});

// pie chart

var canvas = document.getElementById("myPieChart").getContext('2d');

//let root1 = document.querySelector('#datas');
//let  jsondata = root1.dataset.items
jsondata = JSON.parse(jsondata)
//nombre de RDVs par mois
console.log("Mes Stats:"+jsondata);
 
nbrdoc =[]
nbrbooking =[]
nbbookhonored = []
jsondata.forEach( val =>{
    nbrdoc.push(val.nbr_doc)
    nbrbooking.push(val.nbr_booking)
    nbbookhonored.push(val. nbr_booking_honored)
})

console.log("Nb de docs="+ nbrdoc);
console.log("Nb de bookings="+ nbrbooking);

var myPieChart = new Chart(canvas, {
    type: 'pie',
    data: {
        labels: ["Nombre de médecins inscrits", "Nombre de rendez-vous", "Nombre de rendez-vous honorés"],
        datasets: [{
            data: [nbrdoc, nbrbooking, nbbookhonored],
            backgroundColor: ['#007bff', '#dc3545', '#ffc107'],
        }],
    },
});

在我的Charts.js文件中，“区域”示例运行良好，但是如果由于代码而添加了饼图，则无法显示。我想查看饼图，其中包含注册医生的数量，约会的数量和受尊敬的约会的数量，但没有显示任何内容。谢谢

我的var_dump结果显示注册医生的数量，约会的数量和受聘的约会的数量

  array(1) { [0]=> array(1) { ["nbr_doc"]=> string(1) "4" } } array(1) { [0]=> array(1) { ["nbr_booking"]=> string(2) "27" } } array(1) { [0]=> array(1) { ["nbr_booking_honored"]=> string(1) "1" } }