在javascript數組中動態添加數據

Question

我有這個控制器：

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

在home.blade.php視圖中，我需要獲取用戶的旅行，食物，其他屬性。 我可以使用$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

您可以在控制器中執行以下操作：

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>

可以解決您的問題。

Answer 2

使用相同的符號：

data: [{{$user->travel}}, {{$user->food}}, {{$user->misc}}]

這樣，模板引擎將呈現值，並在瀏覽器中加載后，javascript將使用它。

Answer 3

嘗試：

<?php

$travel = $user->travel;
$food = $user->food;
$misc =  $user->misc;

$data = "[$travel,$food,$misc]";
?>

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

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

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

Answer 4

        Travel Expenses:<span id='travel'>{{$user->travel}}</span><br>
 Food Expenses:<span id='food'>{{$user->food}}</span><br>
 Miscellaneous Expenses:<span id='misc'>{{$user->misc}}</span>

        <canvas id="myChart"></canvas> <script> 
        var ctx = document.getElementById("myChart");

        var data = { 
           labels: [
              "Travel", 
              "Food", 
              "Miscellaneous"
           ], 
          datasets: [ { 
             data: [
                document.getElementById('travel').innerHTML, 
    document.getElementById('food').innerHTML, 
    document.getElementById('misc').innerHTML],
             backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ], 
             hoverBackgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ] 
           }] 
        }; 
    </script>


Try this.