Question

努力让我的甜甜圈图表显示（v2.5.0）。它在我输入手动数据时起作用，但是现在有动态数据我正在努力。在PHP Laravel控制器中设置数据。我怀疑$viewData设置不正确，因此它没有显示图表。它显示图表文本。

PHP：

   $labels = array();
    $dataset = array();
    foreach ($count as $c) {                        
        array_push($dataset, $c->total);    
        array_push($labels, $c->race);                                        
    }

$viewData = array('labels'=>$labels, 'datasets'=> array(           
        array(
            'backgroundColor' => "#3e95cd",
            'hoverBackgroundColor'=> "rgba(62, 149, 205, 0.57)",
            'data'=> $dataset[0]),
        array(
            'backgroundColor' => "#8e5ea2",
            'hoverBackgroundColor'=> "rgba(62, 149, 205, 0.57)",
            'data'=> $dataset[1]),
        array(
            'backgroundColor' => "#3e95cd",
            'hoverBackgroundColor'=> "rgba(62, 149, 205, 0.57)",
            'data'=> $dataset[2]),
        array(
            'backgroundColor' => "#8e5ea2",
            'hoverBackgroundColor'=> "rgba(62, 149, 205, 0.57)",
            'data'=> $dataset[3]),
        array(
            'backgroundColor' => "#3e95cd",
            'hoverBackgroundColor'=> "rgba(62, 149, 205, 0.57)",
            'data'=> $dataset[4]),            
        array(
            'backgroundColor' => "#8e5ea2",
            'hoverBackgroundColor'=> "rgba(62, 149, 205, 0.57)",
            'data'=> $dataset[5])                          
    ));
    return (json_encode($viewData));

使用Javascript：

$(document).on('ready', function() {   
        $.ajax({
            url: './dashboard/overallmetrics',              
            data: {_token: "{!!csrf_token()!!}"},
            dataType: 'json',
            method: 'post'

        }).done(function (data) {
            console.log('Success!', data);             

            var ctx = document.getElementById("myChart").getContext("2d");

            var myDoughnutChart = new Chart(ctx, {
                type: 'doughnut',
                data: data,
                options: {                      
                  responsive: true,
                  title: {
                    display: true,
                    text: 'Athlete count per ethnicity'
                  }
                }
            });
});

JSON

{"labels":["asian","black","colored","indian","other","white"],"datasets":[{"backgroundColor":"#3e95cd","hoverBackgroundColor":"rgba(62, 149, 205, 0.57)","data":26},{"backgroundColor":"#8e5ea2","hoverBackgroundColor":"rgba(62, 149, 205, 0.57)","data":27},{"backgroundColor":"#3e95cd","hoverBackgroundColor":"rgba(62, 149, 205, 0.57)","data":3},{"backgroundColor":"#8e5ea2","hoverBackgroundColor":"rgba(62, 149, 205, 0.57)","data":27},{"backgroundColor":"#3e95cd","hoverBackgroundColor":"rgba(62, 149, 205, 0.57)","data":30},{"backgroundColor":"#8e5ea2","hoverBackgroundColor":"rgba(62, 149, 205, 0.57)","data":31}]}

Chart.js用于PHP的圆环图的数据结构

0 个答案: