我有一个表格,当我提交时会使用以下日期更改图表数据:
<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,
}]
},
});
答案 0 :(得分:0)
我不能根据您给我的代码给您代码。但这是基本原则:
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
</script>
让表单阻止其为默认行为-即,不要提交。
Can I make a <button> not submit a form?
让按钮使用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/
答案 1 :(得分:0)
更新: 最好的方法是使用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/