是否可以在 Laravel 中创建图表而无需使用路由和控制器？

Question

我发现在 laravel 和 laravel 包装器中使用图表的任何选项都使用路由和控制器，这将使我很难尝试显示我试图在图表中表示的数据推送到控制器。

我试过使用 Vue 来使用图表 js，但它不起作用，有什么想法吗？

非常感谢。

Answer 1

您可以简单地打开一个 blade 并在里面使用 #javascript 来显示图表这是一个带有一些假数据的简单文件您可以尝试将其全部复制并粘贴到 blade（不要忘记在顶部添加@extend('')：

@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<div class="box box-primary">
<div class="box-header with-border">
    <h3 class="box-title">Area Chart</h3>

    <div class="box-tools pull-right">
        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
        </button>
        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
    </div>
</div>
<div class="box-body">
    <div class="chart">
        <canvas id="myChart1"></canvas>
    </div>
</div>
</div>
</body>
<script>
var myChart1 = document.getElementById('myChart1').getContext('2d');

// Global Options
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = '#777';

var massPopChart = new Chart(myChart1, {
  type:'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
  data:{
    labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
    datasets:[{
      label:'Population',
      data:[
        617594,
        181045,
        153060,
        106519,
        105162,
        95072
      ],
      //backgroundColor:'green',
      backgroundColor:[
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(153, 102, 255, 0.6)',
        'rgba(255, 159, 64, 0.6)',
        'rgba(255, 99, 132, 0.6)'
      ],
      borderWidth:1,
      borderColor:'#777',
      hoverBorderWidth:3,
      hoverBorderColor:'#000'
    }]
  },
  options:{
    title:{
      display:true,
      text:'Largest Cities In Massachusetts',
      fontSize:25,
      responsive: true
    },
    legend:{
      display:true,
      position:'right',
      labels:{
        fontColor:'#000'
      }
    },
    layout:{
      padding:{
        left:50,
        right:0,
        bottom:0,
        top:0
      }
    },
    tooltips:{
      enabled:true
    }



  }
});


  </script>
@endsection

是否可以在 Laravel 中创建图表而无需使用路由和控制器？

Is there anyway to create a chart in Laravel without having to use routes and controllers?

charts

laravel

vue.js