使用 Ajax 刷新 Laravel 图表

Question

我正在尝试使用 laravel 图表库在网页 (laravel) 中实现图表。 目前我能够使用

填充数据

{!! $chart->container() !!} 

在视图中。

我想写一个js函数每分钟刷新一次图表数据。

在 laravel 图表文档中，他们提供了如下代码，因此它会将我们需要的值返回给视图。

chart = new SampleChart;
$chart->dataset('Sample Test', 'bar', [3,4,1]);
$chart->dataset('Sample Test', 'line', [1,4,3]);
return $chart->api();

js

var original_api_url = {{ $chart->id }}_api_url;
{{ $chart->id }}_refresh(original_api_url);

我不明白的是，在哪里使用这些函数以及如何使用这些刷新函数来刷新我的图表？ 因此，我们是否必须替换 {{ $chart->id }}_api_url; 的 _api_url 部分？上面提到的js呢？

我是 laravel 的新手。如果你熟悉使用 laravel 图表，请告诉我如何解决这个问题。

文档网址 https://charts.erik.cat/api_charts.html#building-the-chart

谢谢。

Answer 1

因此，要使用刷新功能，您需要一个控制器，该控制器具有将数据返回为 json 的方法。

所以创建一个新的控制器方法：

public function chartApi() {
    $chart = new SampleChart;
    $chart->dataset('Sample Test', 'bar', [3,4,1]);
    $chart->dataset('Sample Test', 'line', [1,4,3]);
    return $chart->api();
}

并为其添加路线：

Route::get('chart-data', ['uses' => 'YourController@chartApi']);

然后，在呈现图表视图的控制器中：

$chart = new SampleChart;

$api = url('/chart-data');

$chart->labels(['test1', 'test2', 'test3'])->load($api)

return view('yourview', ['chart' => $chart]);