개요

기본

그래프의 좌우에 메모리를 추가

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
            }
        }
    ]
}

툴팁에 숫자에 세 자리마다 쉼표를 친다.

tooltips: {
    callbacks: {
        label: function(tooltipItem, data) {
            console.log(tooltipItem);
            return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
    }
},

월간 그래프로 월초부터가 아닌 30일간의 데이터를 표시한다

    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);
    }