>

아래 그림과 같이 데이터베이스 테이블에 저장된 데이터를 기준으로 막대 차트를 표시하려고합니다.

<올>
  • 경로
  • Route::get('/chart', '[email protected]');
    Route::get('/chart', '[email protected]');
    
    

    1. 컨트롤러
    public function index()
    {
        return view('chart.index');
    }
    public function chart()
    {
        $result = DB::table('agreement')->select('val_agrement')->get();
        return response()->json($result);
    }            
    
    
    

    1. 블레이드 템플릿
    @extends('adminlte::page')
        @section('content')
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/css/bootstrap-select.min.css">
                <body>
                <div class="row">
                <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading"><b>CHART</b></div>
                        <div class="panel-body">
                        <canvas id="canvas" height="300" width="700"></canvas>
                    </div>
                </div>
            </div>
            </div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/js/bootstrap-select.min.js" charset="utf-8"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js" charset="utf-8"></script>
            <script>
                var url = "{{url('chart')}}";
                var ctx = document.getElementById("canvas").getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels:VALUEA,
                        datasets: [{
                            label: 'VALUEA',
                            data: valuea,
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero:true
                                }
                            }]
                        }
                    }
                });
            </script>
        @endsection
    
    

    라 라벨에서 차트를 만드는 방법은 지금까지 위의 코드와 같습니다. 감사합니다

    죄송합니다. 여기에 블레이드 코드를 작성하기가 어렵습니다.

    • 답변 # 1

      추천? Chart.js와 함께 Vue.js 컴포넌트를 사용하십시오. 이와 같은 것이 도움이 될 수 있습니다.

      경로 /web.php

      Route::get('/chart', '[email protected]');
      
      

      ChartController

      public function chart()
      {
          $query = DB::table('agreement')->select('val_agrement')->get();
          $result = $query->toArray();
          return view('your-blade', [
              'result' => $result
          ]);
      }
      
      

      YourComponent.vue

      <script>
        import { Bar } from 'vue-chartjs'
        export default {
        extends: Bar,
        props: ['chartData'],
        mounted() {
          var length = this.chartData.length;
          var array = this.chartData;
          // Our array to store the data as we loop through it    
          var dataArray = [];
          for ( var i = 0; i < length; i++ )
            {
              // Push your data to the array
              dataArray.push(array[i] ? array[i].val_agrement : '');
            }
         this.renderChart({
            labels: 'Val Agreement',
            datasets: [
              {
                label: 'Your super cool bar chart',
                backgroundColor: 
                  '#0088cc',
                borderColor: [
                  'rgb(13, 29, 63)',
                ],
                data: dataArray,
              }
            ]
          }, {responsive: true, maintainAspectRatio: false,})
        }
      }
      </script>
      
      

      your-blade.blade.php

      <your-component :chart-data="{{ json_encode($result) }}"> </your-component>
      
      

    • 답변 # 2

      블레이드 파일에서 :

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://code.highcharts.com/highcharts.js"></script>
      <script src="https://code.highcharts.com/modules/exporting.js"></script>
      <script src="https://code.highcharts.com/modules/export-data.js"></script>
      <div id="chart_div" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
      
      

      JS에서 :

      function myChart (data) {
          $('#chart_div').highcharts({
          chart: {
              type: 'column'
          },
          title: {
              text: 'Stacked column chart'
          },
          xAxis: {
              categories: [1,2,3,4,5,6,7,8,9,10,11,12]
          },
          yAxis: {
              min: 0,
              title: {
                  text: 'Total fruit consumption'
              },
              stackLabels: {
                  enabled: true,
                  style: {
                      fontWeight: 'bold',
                      color: ( // theme
                          Highcharts.defaultOptions.title.style &&
                          Highcharts.defaultOptions.title.style.color
                      ) || 'gray'
                  }
              }
          },
          legend: {
              align: 'right',
              x: -30,
              verticalAlign: 'top',
              y: 25,
              floating: true,
              backgroundColor:
                  Highcharts.defaultOptions.legend.backgroundColor || 'white',
              borderColor: '#CCC',
              borderWidth: 1,
              shadow: false
          },
          tooltip: {
              headerFormat: '<b>{point.x}</b><br/>',
              pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
          },
          plotOptions: {
              column: {
                  stacking: 'normal'            
              }
          },
          series: [{
              name: 'John',
              data: [5000, 20000, 30000, 10000, 30000, 50000, 23000, 44000, 42000, 30000, 22000, 43000]
          }]
      });
       }
       $(document).ready(function() {
        $.ajax({
           url: 'your_data_route',
           type: 'GET',
           async: true,
           dataType: "json",
           success: function (data) {
              myChart(data);
           }
         });
        });
      
      

      여기 데모 jsFiddle이 있습니다. 데모 js 바이올린

  • 이전 parceljs - Parcel로 빌드하기 전에 dist/디렉토리를 지우는 방법
  • 다음 vba와 함께 Excel에서 마지막으로 사용 된 셀을 찾는 오류