Question

我尝试基于存储在数据库表中的数据显示条形图，如下图所示，下面的图像仅用于说明

路线

Route::get('/chart', 'ChartController@index');
Route::get('/chart', 'ChartController@chart');

控制器

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

到目前为止，如何在laravel中创建图表。谢谢

对不起，很难在此处编写刀片服务器代码。

Answer 1

在刀片文件中：

<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： demo js fiddle

Answer 2

推荐？将Vue.js组件与Chart.js一起使用。这样的事情可能会对您有所帮助。

Routes / web.php

Route::get('/chart', 'ChartController@chart');

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>

在Laravel中显示条形图

2 个答案: