如何使用带有关系的图表js

Question

我有两个与之相关的表动物和类型

动物表

 public function up()
    {
        Schema::create('animals', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->unsignedBigInteger('user_id')->index();
            $table->unsignedBigInteger('type_id')->index();
            $table->string('gender');
            $table->integer('weight');
            $table->date('dateOfBirth');
            $table->string('description');
            $table->unsignedBigInteger('address_id');
            $table->timestamps();

            $table->foreign('user_id')->references('id')->on('users');
            $table->foreign('type_id')->references('id')->on('types');
            $table->foreign('address_id')->references('id')->on('addresses');
        });

      //  DB::statement('ALTER TABLE animals AUTO_INCREMENT = 1000;');
    }

类型表

public function up()
    {
        Schema::create('types', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('category');
            $table->timestamps();
        });
    }

和关系是

动物模型

 public function type(){
        return $this->belongsTo(Type::class);
    }

类型模型

 public function animals(){
        return $this->hasMany(Animal::class);
    }

我想根据动物的类别（类型）创建一个饼图，以显示其总数。如何在Laravel中使用Chart js来解决这个问题