[英]update my chartjs form without refreshing page
我有一個表單,當我提交時使用輸入的日期更改我的圖表數據:
<form action="{{route('home')}}" method="get" id="">
<div>
<label for="daterange">Date Range:</label>
<input type="date" name="StartDate" id="StartDate" class="form-control col-md-3"
value="{{isset($searchParams['StartDate']) ? $searchParams['StartDate'] : Carbon\Carbon::now()->subDays(10)->format('yy-m-d')}}"> to
<input type="date" name="EndDate" id="EndDate" class="form-control col-md-3"
value="{{isset($searchParams['EndDate']) ? $searchParams['EndDate'] : Carbon\Carbon::now()->subDays(5)->format('yy-m-d')}}">
</div>
<br>
<div>
<label for="shortcuts">shortcuts:</label>
<a class="btn btn-sm btn-white" href="#">This Week</a>
<a class="btn btn-sm btn-white" href="#">This Month</a>
</div>
<button type="submit" class="btn btn-md btn-white ml-4 mr-1">filter</button>
</form>
我有大約 4 個 chartjs 圖表,我希望能夠在不刷新頁面的情況下更改圖表的日期范圍。 有人建議我使用 ajax 調用,但我不太確定如何正確實現它。
var ctx = document.getElementById("Chart").getContext('2d');
var recentActivityChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [
@foreach($data as $a)
'{{$a->StartDate}}',
@endforeach
],
datasets: [{
label: 'hours',
data: [
@foreach($data as $b)
'{{$b->Duration}}',
@endforeach
],
barThickness: 12,
fill: true,
backgroundColor: "rgba(54, 162, 235, 1)",
borderColor: "rgba(54, 162, 235, 1)",
borderWidth: 1,
}]
},
});
我不能根據你給我的東西給你代碼。 但這是基本原則:
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
</script>
讓表單阻止它的默認行為 - 即不提交。
我可以讓 <button> 不提交表單嗎?
讓您的按鈕使用 Jquery 觸發 AJAX 調用。 jQuery Get 是最基本的學習實現。 查看 jquery: https : //api.jquery.com/jQuery.get/
<button onclick="doJSFunction(ctx)">
在您的 doJSFunction 中,執行以下操作:
$.get( "/yourChartData", { startDate: "12-20-2020", endDate: "12-31-2020" } ) .done(function( data ) { var myChart = new Chart(ctx, { type: 'bar', data: { // ALL OF THIS EITHER GETS FILLED IN BY OR CHANGED BY YOUR RESPONSE DATA labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }
}); });
編輯:這是用於繪制新圖表的 chartJS。 hhttps://www.chartjs.org/docs/latest/
更新:最好的方法是使用 iframe。 設置你的表格喜歡這樣
<form action="{{route('chart.home')}}" method="get" id="" target="Charts">
<div>
<label for="daterange">Date Range:</label>
<input type="date" name="StartDate" id="StartDate" class="form-control col-md-3"
value="{{isset($searchParams['StartDate']) ? $searchParams['StartDate'] : Carbon\Carbon::now()->subDay(7)->format('yy-m-d')}}"> to
<input type="date" name="EndDate" id="EndDate" class="form-control col-md-3"
value="{{isset($searchParams['EndDate']) ? $searchParams['EndDate'] : Carbon\Carbon::now()->format('yy-m-d')}}">
</div>
<br>
<button type="submit" class="btn btn-sm btn-white">filter</button>
放置畫布的位置,替換為 iframe,如下所示:
<iframe name="Charts" id="iframe" src="{{route('chart.home')}}"></iframe>
這將填充您在此 iframe 中提交的任何內容。
在 charthome.blade.php 的刀片中,放置您的 chartjs。 在表單提交時,您的 chartjs 將更新並顯示在您的 iframe 中,而無需重新加載頁面!
此版本不需要 ajax 調用或阻止默認值,因此它更容易並且需要更少的代碼和專業知識。 有關 iframe 的更多信息,請查看
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe https://css-tricks.com/snippets/html/post-data-to-an-iframe/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.