>

chartjs 차트를 생성하는 js 파일이 있습니다. 차트에서 'id'를 사용하여 데이터를 동적으로 가져 오기를 원합니다.

이것은 라 라벨 블레이드의 코드입니다 :

<div class="card">                      
  <canvas id="dash-donut-rice" width="100%" height="100%"></canvas>
  <script src="{{url( 'vendor/dash-donut.js' )}}"></script>
</div>

여기는 노선입니다 :

Route::get('/get-donut/{id}', '[email protected]');

컨트롤러는 다음과 같습니다 :

public function getDonut($id)
    {
        //dd($id);
        $new = PurchaseOrder::where('status', 'NEW')->where('bu_id', $id)->count();
        $completed = PurchaseOrder::where('status', 'COMPLETED')->where('bu_id', $id)->count();
        $cancelled = PurchaseOrder::where('status', 'CANCELLED')->where('bu_id', $id)->count();
        $total = PurchaseOrder::where('bu_id', $id)->count();
        //$center_text = ($completed / $total) * 100 . '%';
        if ($total == 0) {
            $center_text = '0%';
        } else {
            $center_text = number_format(($completed / $total) * 100, 0) . '%';
        }
        $donut_data_array = array(
            'count' => [$cancelled, $new, $completed],
            'center_text' => $center_text,
        );
        return $donut_data_array;
    }

다음은 ChartJS 함수입니다.

ajaxGetPostMonthlyData: function () {
            //var urlPath =  'http://' + window.location.hostname + '/get-post-chart-data';
            //var urlPath =  'http://nipayandtuazon.com/get-rice-donut';
            //var urlPath =  'http://nipayandtuazon.com/get-rice-donut';
            var request = $.ajax( {
                method: 'GET',
                url: '/get-donut/1',
        } );

https://imgur.com/a/R4oos6V

미리 감사합니다!

  • 답변 # 1

    ajaxGetPostMonthlyData: function () {
            //var urlPath =  'http://' + window.location.hostname + '/get-post-chart-data';
            //var urlPath =  'http://nipayandtuazon.com/get-rice-donut';
            //var urlPath =  'http://nipayandtuazon.com/get-rice-donut';
            var request = $.ajax( {
                method: 'GET',
                url: '/get-donut/{{$id}}',
        } );
    
    

    이제 $id의 모든 것을 동적으로 전달할 수 있습니다. 클라이언트 측에서 수행하는 경우 변수를 전달해야합니다. 예를 들어 id로 요소를 가져 와서 그 값을 얻은 다음 거기에 넣을 수 있습니다. 입력 상자를 사용하여 프런트 엔드 나 서버 쪽에서이 작업을 수행하려고하는지 확실하지 않습니다.

관련 자료

  • 이전 중단 점없이 GDB에서 실행을 중지하려면 어떻게합니까?
  • 다음 hyperledger fabric - 수정 후 체인 코드를 업그레이드하는 방법은 무엇입니까?