dtkyayvldeaqhl7151 2019-06-07 04:46
浏览 147
已采纳

在laravel中显示条形图

I try to display bar chart based on data stored in table of database like image below, below image just for ilustration Bar Chart

  1. Route
Route::get('/chart', 'ChartController@index');
Route::get('/chart', 'ChartController@chart');
  1. Controller 
public function index()
{
    return view('chart.index');
}

public function chart()
{
    $result = DB::table('agreement')->select('val_agrement')->get();
    return response()->json($result);
}
  1. blade template
@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

how to create chart in laravel, so far, my code as above. thank you

im sorry, its difficult to write blade code here.

  • 写回答

2条回答 默认 最新

  • duanba4942 2019-06-07 06:31
    关注

    Recommendation? Use Vue.js components with Chart.js. Something like this might help you.

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 乌班图ip地址配置及远程SSH
  • ¥15 怎么让点阵屏显示静态爱心，用keiluVision5写出让点阵屏显示静态爱心的代码，越快越好
  • ¥15 PSPICE制作一个加法器
  • ¥15 javaweb项目无法正常跳转
  • ¥15 VMBox虚拟机无法访问
  • ¥15 skd显示找不到头文件
  • ¥15 机器视觉中图片中长度与真实长度的关系
  • ¥15 fastreport table 怎么只让每页的最下面和最顶部有横线
  • ¥15 java 的protected权限 ，问题在注释里
  • ¥15 这个是哪里有问题啊？