在不刷新页面的情况下更新我的 chartjs 表单

Question

我有一个表单，当我提交时使用输入的日期更改我的图表数据：

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

Answer 1

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

1. 设置画布

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');

</script>

2. 让表单阻止它的默认行为 - 即不提交。
   我可以让 <button> 不提交表单吗？

3. 让您的按钮使用 Jquery 触发 AJAX 调用。 jQuery Get 是最基本的学习实现。 查看 jquery： https : //api.jquery.com/jQuery.get/

<button onclick="doJSFunction(ctx)">

4. 使用响应数据，以图表 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, 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/

Answer 2

更新：最好的方法是使用 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/