EC-CUBE4の管理画面の売り上げグラフがChart.jsで実装されたのでカスタマイズしてみた

11400 ワード
chart.js EC-CUBE JavaScript EC-CUBE4 JavaScript テキストリンク

概要

EC-CUBE4の管理画面の売り上げグラフが実装されたのでカスタマイズしてみたメモ

EC-CUBE4リポジトリ
EC-CUBE4のドキュメント
Chart.js公式マニュアル
Chart.jsの日本語マニュアル

デフォルト

グラフの左右にメモリを追加

/src/Eccube/Resource/template/admin/index.twigの78行目付近から
scales: {
    yAxes: [
        {
            id: 'y-axis-1',
            display: true, // trueに変更
            position: 'left', // 左に表示
            ticks: {
                beginAtZero: true,
                callback: function(label, index, labels) {
                    return '¥' + label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                }
            }
        },
        {
            id: 'y-axis-2',
            display: true, // trueに変更
            position: 'right', // 右に表示
            ticks: {
                beginAtZero: true,
                stepSize: 50,
                callback: function(label, index, labels) {
                    return label.toString();
                }
            },
            gridLines: { // 件数の横グリッドを消す
                drawOnChartArea: false
            }
        }
    ]
}

ツールチップに数値に３桁ごとにカンマを打つ

/src/Eccube/Resource/template/admin/index.twigの70行目付近から
tooltips: {
    callbacks: {
        label: function(tooltipItem, data) {
            console.log(tooltipItem);
            return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
    }
},

月間のグラフで月初からではなく３０日間のデータを表示する

/Users/hideki_okajima/PhpstormProjects/ec-cube/src/Eccube/Controller/Admin/AdminController.phpの271行目付近
    public function sale(Request $request)
    {
        if (!($request->isXmlHttpRequest() && $this->isTokenValid())) {
            return $this->json(['status' => 'NG'], 400);
        }

        // 週間の売上金額
        $toDate = Carbon::now();
        $fromDate = Carbon::today()->subWeek();
        $rawWeekly = $this->getData($fromDate, $toDate, 'Y/m/d');

        // 月間の売上金額
        $fromDate = Carbon::today()->subMonth(); // ここを変更
        $rawMonthly = $this->getData($fromDate, $toDate, 'Y/m/d');

        // 年間の売上金額
        $fromDate = Carbon::now()->subYear()->startOfMonth();
        $rawYear = $this->getData($fromDate, $toDate, 'Y/m');

        $datas = [$rawWeekly, $rawMonthly, $rawYear];

        return $this->json($datas);
    }