如何通过事件传递图表的数据

问题描述

我有一个图表，我正在通过控制器添加数据。如何通过事件添加数据？

我有一个数据库，通过控制器获取数据，然后将其传输到视图并使用图表显示数据。我需要通过事件传递数据，怎么做？

图表：

        var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx,{
        type: 'bar',data: {
        labels: [],datasets: [{
            label: 'data',data: [],borderWidth: 1
        }]
        },options: {
        scales: {
            xAxes: [],yAxes: [{
            ticks: {
                beginAtZero:true
            }
            }]
        }
        }
    });
    var updateChart = function() {
        $.ajax({
        url: "{{ route('chart') }}",type: 'GET',dataType: 'json',success: function(data) {
            myChart.data.labels = data.labels;
            myChart.data.datasets[0].data = data.data;
            myChart.update();
        },error: function(data){
            console.log(data);
        }
        });
    }
    
    updateChart();

        Echo.channel('events')
        .listen('RealTimeMessage',(e) => {
            updateChart();
        }); 

事件：

<?PHP

namespace App\Events;

use Illuminate\broadcasting\Channel;
use Illuminate\Contracts\broadcasting\Shouldbroadcast;
use Illuminate\Queue\SerializesModels;

class RealTimeMessage implements Shouldbroadcast
{
use SerializesModels;

public string $message;

public function __construct(string $message)
{
    $this->message = $message;
}

public function broadcastOn(): Channel
{
    return new Channel('events');
}
}

控制器：

<?PHP

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;
    use App\Http\Controllers\Controller;
    use App\Models\Data;
    Use App\Events\RealTimeMessage;

    class ChartController extends Controller
    {

    public function index() {
    $infos = Data::latest()->take(30)->get()->sortBy('id');
    $labels = $infos->pluck('id');
    $data = $infos->pluck('data');

    // dd($labels);
    // return view('welcome',compact('labels','data'));
    return response()->json(compact('labels','data'));
    }

    public function add(Request $request) {
            return view('add');
    }

    public function store(Request $request) {
            Data::create($request->data);
            event(new RealTimeMessage('Done!'));
            return view('add');
    }
    }

解决方法

像这样更改事件：（将广播所有公共属性）

public string $message;
public array $data
public function __construct(string $message,array $data)
{
    $this->message = $message;
    $this->data = $data;

}

然后在您的控制器中：

...
event(new RealTimeMessage('Done!',$data));
....