javascript - 饼图未加载，但标签已加载

Question

我在 Laravel 中使用 Chart.js 来显示数据。

我正在关注 this教程，适用于条形图。但现在我正在尝试饼图。

这是我获取数据的 Controller 。

public function chart()
      {
        $result = \DB::table('users')
                    ->where('userType','=','Landlord')
                    ->orderBy('created_at', 'ASC')
                    ->get();
        return response()->json($result);
      }

观点是这样的

<script>
        var url = "{{url('/users')}}";
        var Name = new Array();
        var Email = new Array();
        $(document).ready(function(){
          $.get(url, function(response){
            response.forEach(function(data){
                Name.push(data.name);
                Email.push(data.email);
            });
            var ctx = document.getElementById("canvas").getContext('2d');

              var myPieChart = new Chart(ctx,{
                type: 'pie',

                data : {
                  datasets: [{
                      data: [Name,Email]
                }],

                // These labels appear in the legend and in the tooltips when hovering different arcs
                labels:  [Name, Email]
            }
              });

            });
          });

        </script>

这是输出

Answer 1

根据ChartJS documenation ，为饼图传递的预期数据仅为数字。下面是一个应该有效的数据集示例:

data = {
    datasets: [{
        data: [10, 20, 30]
    }],

    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
};

目前，您的 Ajax 请求正在从 /users 路径获取姓名和电子邮件；您将需要更新请求以从 /users 获取某种数字值并将其添加到数据集中。