javascript - 在javascript数组中动态添加数据

Question

我有这个 Controller :

public function main()
{
    $user=User::find(1);
    return view('home')->with('user',$user);
}

在 home.blade.php View 中，我需要获取用户的属性 travel、food、misc。我可以使用 $user->travel、$user->food、$user->misc 获取那些整数。 但是，我必须在饼图中显示这些费用。所以，我使用 chart.js

    Travel Expenses:{{$user->travel}}<br>
    Food Expenses:{{$user->food}}<br>
    Miscellaneous Expenses:{{$user->misc}}<br>

    <canvas id="myChart"></canvas>

    <script>
     var ctx = document.getElementById("myChart");
            var data = {
                labels: [
                    "Travel",
                    "Food",
                    "Miscellaneous"
                ],
                datasets: [
                    {
                        data: [300, 50, 100],
                        backgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56"
                        ],
                        hoverBackgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56"
                        ]
                    }]
            };
        </script>

这将显示静态数据 300、50 和 100。如何动态添加这些数据？我需要 data: [300, 50, 100]，类似于 data: [$user->travel, $user->food, $user->misc],

Answer 1

你可以在你的 Controller 中做类似的事情:

public function main()
{
    $user = User::find(1);
    $data = [
        'user'      => $user,
        'dataChart' => [$user->travel, $user->food, $user->misc]
    ];
    return view('home', $data);
}

在你看来:

<script>
var ctx = document.getElementById("myChart");
var data = {
    labels: [
      "Travel",
      "Food",
      "Miscellaneous"
    ],
    datasets: [{
        data: {{$dataChart}},
        backgroundColor: [
            "#FF6384",
            "#36A2EB",
            "#FFCE56"
        ],
        hoverBackgroundColor: [
            "#FF6384",
            "#36A2EB",
            "#FFCE56"
        ]
    }]
};
</script>

这就解决了你的问题。