更新我的chartjs表单而无需刷新页面

问题描述

我有一个表格，当我提交时会使用以下日期更改图表数据：

<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,borderWidth: 1,}]
            },});

解决方法

我不能根据您给我的代码给您代码。但这是基本原则：

设置画布

<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)">

使用响应数据，以图表js可以使用的方式对其进行格式化。我确定chartJS库具有刷新，更新或绘制新图表类型的方法。

在您的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,'rgba(255,206,86,'rgba(75,192,'rgba(153,102,255,159,64,0.2)'
        ],borderColor: [
            'rgba(255,1)',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/

ajax form-submit