홈>2020-03-18 17:17

php - 라 라벨에 막대 차트 표시

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

<올>

경로

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

컨트롤러

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

블레이드 템플릿

@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

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

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

phplaravelchart.js

답변 # 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 바이올린

Python2.net

php - 라 라벨에 막대 차트 표시

관련 자료