Dcat Admin 圖表製作使用說明

辣粉and五斤發表於2021-09-25

看了Dcat Admin 官方手冊對於 Apexcharts.js 圖表的簡單製作示例，看了以後沒太明白怎麼用。
以前做圖表外掛都是讓前端小妹去找的echart 圖表外掛製作的。 對於Apexcharts.js 圖表外掛，我還從來沒有學習過。

Apexcharts.js官網裡是全英文的文件，用百度軟體翻譯，花了些時間進行了學習。

我在簡書裡做了一個學習筆記：
（1）關於安裝和線性圖案例
www.jianshu.com/p/82f5c1e2c336

初步搞明白了，Apexcharts.js的使用方法。

根據Apexcharts 官方的JS程式碼示例，JS程式分為三部分：
（1）定義options物件，
(2)new ApexCharts()例項化操作。
(3) 調取render()方法進行圖表渲染。
如下程式碼所示：最重要的工作就是將options物件配置清楚。JS裡面用的是{}物件表示法，到了PHP中就要轉換成[]陣列來表示。

var options = {
  chart: {
    type: 'line'
  },
  series: [{
    name: 'sales',
    data: [30,40,35,50,49,60,70,91,125]
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

關於 options物件的定義，有多達25種類屬性。它的官網：apexcharts.com/docs/options/annota... 裡介紹了相關的類屬性。

我用思維導圖，把一些常用的類屬性進行了記錄。
www.jianshu.com/p/768e03273492

另一個就是其官網上提供了12種圖表的demo程式碼示例：
apexcharts.com/javascript-chart-de...
我們想做哪種圖表，在上面找程式碼，然後將其轉化成php就可以了。

仿照官網給的例子，我做了一個餅圖：

Dcat Admin 圖表製作使用說明

這個大餅圖原先的JS程式碼：apexcharts.com/javascript-chart-de...

我在Dcat官網給出的程式碼上，做了一些精簡，下面是程式碼，一些沒有必要的地方，我已經刪除掉了，這樣最簡化容易理解。

先看一下餅圖裡的JS程式碼，後面要將它轉化成php程式碼。

var options = {
          series: [44, 55, 13, 43, 22],
          chart: {
             width: 380,
             type: 'pie',
        },
        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],

第1步 引入檔案

namespace App\Admin\Widgets\Chart;
use Dcat\Admin\Admin;
use Dcat\Admin\Widgets\ApexCharts\Chart;

這裡面Widgets\ApexCharts\Chart 這個類，就是Dcat定義的圖表類，它的父類是Widget（是一個抽象類）

Dcat Admin 圖表製作使用說明

2.構建類

我定義了一個叫Pie的類，它內部有2個類成員方法

方法 說明
__construct 建構函式
setUpOptions 初始化option方法

其實也可以在建構函式中，直接進行options初始化，但為了程式碼的美觀，還是將其放入到setOptions方法裡，這個方法的名字，大家可以自定義，隨便起名。

class Pie extends Chart{

//建構函式這塊，可以直接拿過來使用
    public function __construct($containerSelector = null, $options = [])
    {
        parent::__construct($containerSelector, $options);

        $this->setUpOptions();
    }

  //初始化方法，主要是呼叫$this->options()方法，執行整個option的初始化操作。
  protected function setUpOptions()
    {
        $this->options([
            "chart"=>[
                "width"=>380,
                "type"=>"pie"
            ],
        ]);

        // 執行你的資料查詢邏輯
        $data = [44, 55, 13, 43, 22];
        $label = ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'];
        //option()方法也定義在Dcat\Admin\Widgets 類中，它負責為options屬性，進行設定工作
        $this->option("series",$data);
        $this->option("labels",$label);

    }

這裡的options()是 Dcat\Admin\Widgets 類中定義的方法。
在Widget類裡有一個成員屬性options,它負責儲存圖表裡的配置項。
通過options()方法可以進行批量設定。

protected $options = [];

到此操作完畢，Widget類中定義了render()方法，它會自動呼叫進行渲染。我們自己定義的圖表類裡，只需要上面兩個方法就可以了。便於理解，後需跟據需要，大家可以自己豐富自定義的圖表類。

3.在控制器中使用

控制器中，需要先引入Card 類，和自定義的圖表類

use Dcat\Admin\Widgets\Card;
use App\Admin\Widgets\Chart\Pie;

然後是在控制器方法裡，呼叫Card::make()方法

public function pic(Content $content){
        return $content->body(
            Card::make('舔狗沒有好下場',Pie::make())
        );
}

make()方法有兩個引數：
引數1：接收字串，將做為圖表的標題顯示
引數2：是我們自定義的圖表類物件。

以上操作完成後，圖表就可以渲染出來了。

這篇文件只做為一個學習使用記錄，底層程式碼流程，我就不貼了。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章