Question

我有这个控制器：

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

在home.blade.php视图中，我需要获取用户的属性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

您可以在控制器中执行类似的操作：

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.

在javascript数组中动态添加数据

4 个答案: