我正在尝试使用AJAX在Laravel中显示动态的Google条形图。
因此，我试图使用带有select选项的AJA在laravel中填充数据，并且出现此错误：
此路由不支持GET方法。支持的方法：POST。
我的视图 ：： tstChart.blade.php
<!DOCTYPE html>
<head>
<!--Load the AJAX API-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dynamic Bar Chart</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawMonthlyChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawMonthlyChart(chart_data, chart_main_title) {
let jsonData = chart_data;
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Months');
data.addColumn('number', 'Quantite');
$.each(jsonData, (i, jsonData) => {
let month = jsonData.month;
let quantite = jsonData.quantite;
data.addRows([
[month, quantite]
]);
});
// Set chart options
var options = {
title:'Monthly Data',
hAxis:{
title: 'Months'
},
vAxis:{
title:'Quantite'
},
colors:['black'],
chartArea:{
width:'50%',
height:'80%'
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function load_monthly_data(year, title) {
const temp_title = title + ' ' + year;
$.ajax({
url: 'chart/fetch_data',
method:"post",
data: {
"_token": "{{ csrf_token() }}",
year:year
},
dataType: "JSON",
success:function(data) {
drawMonthlyChart(data, temp_title);
}
});
console.log(`Year: ${year}`);
}
</script>
</head>
<body class="bg-secondary">
<header class="text-center p-4 text-white bg-dark">
<h1>Dynamic Bar Charts </h1>
</header>
<div class="card-body">
<div class="row">
<div class="col-md-9">
</div>
<div class="col-md-3">
<select name="year" id="year" class="form-control">
<option value="">Select Year</option>
@foreach($year_list as $row)
<option value="{{$row->year}}">{{$row->year}}</option>
@endforeach
{{-- <option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option> --}}
</select>
</div>
</div>
<div style="margin-top: 150px;"></div>
<div class="panel-body">
<div id="chart_div" style="width: 100%; height: 600px;"></div>
</div>
</div>
<!--Div that will hold the pie chart-->
<script src="http://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
$(document).ready(function() {
$('#year').change(function() {
var year = $(this).val();
if(year != '') {
// alert(year);
load_monthly_data(year, 'Monthlly Data for:');
}
});
});
</script>
</body>
</html>
我的控制器 ：： GraphController.php
class GraphController extends Controller{
public function index(){
$data['year_list'] = $this->fetch_year();
return view('tstChart')->with($data);
}
public function fetch_year() {
$data = DB::table('ventes')->select(DB::raw('DISTINCT YEAR(date) year'))
//->groupBy('date')`enter code here`
// ->orderBy('date', 'DESC')
->get();
return $data;
}
public function fetch_data(Request $request) {
if($request->input('year'))
{
$chart_data = $this->fetch_chart_data($request->input('year'));
foreach($chart_data->toArray() as $row)
{
$output[] = array(
'month' => $row->month,
'quantite' => $row->quantite
);
}
echo json_encode($output);
}
}
function fetch_chart_data($year)
{
$data = DB::table('ventes')->select(DB::raw('DISTINCT id_vente, quantite, YEAR(date) year,
MONTH(date) month'))
// ->orderBy('year', 'ASC')
->where('YEAR(date)', $year)
->get();
return $data;
}}
路由 :: Web.php
Route::get('/charts','GraphController@index');
Route::post('chart/fetch_data', 'GraphController@fetch_data');
我该如何解决这个问题？