Question

我是Laravel的初学者，我试图在chart.js上显示项目名称和工作时间。不幸的是，数据没有显示在图表上。我该怎么证明？

控制器

图表脚本

 <script>
var ctx = document.getElementById('myChart');

var myChart = new Chart(ctx, {

    type: 'bar',
    @foreach($hour_logs   as  $key=>$value)
    data: {

        //labels: ['Red','Purple'],

          labels: {{$value}},

        datasets: [{
    
            data: {{$value}},
            backgroundColor: [
                'rgba(54, 162, 235, 0.2)', 
            ],
            borderColor: [
                'rgba(54, 162, 235, 1)', 
            ],
            borderWidth: 1
        }]
    },
    @endforeach
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

返回回复

[
  "Joylinkhk: 13,",
  "HorizonTechnologies: 2,",
  "Alahazrat: 9,",
  "j2w: 0,"
]
on the left side project name and on the right side hours 


dd($hour_logs)

array:4 [
  0 => "Joylinkhk: 13,"
  1 => "HorizonTechnologies: 2,"
  2 => "Alahazrat: 9,"
  3 => "j2w: 0,"
]

Answer 1

将复杂的数据结构从PHP传递到JavaScript时，您很可能希望将其转换为JSON。

您可以使用json_encode()将数组转换为JSON。如果您使用的是Larvel集合，则可以使用->toJson()进行转换。

Answer 2

使用以下代码您必须通过这样的解析从控制器发送数据

implode(',', $label) and 
implode(',', $value)


<script>
let label = {!! $label !!}
let value = {!! $value !!}
var ctx = document.getElementById('myChart');

var myChart = new Chart(ctx, {

type: 'bar',
@foreach($hour_logs   as  $key=>$value)
data: {

    //labels: ['Red','Purple'],

      labels: label.split(','),

    datasets: [{

        data: value.aplit(,),
        backgroundColor: [
            'rgba(54, 162, 235, 0.2)', 
        ],
        borderColor: [
            'rgba(54, 162, 235, 1)', 
        ],
        borderWidth: 1
    }]
},
@endforeach
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});
</script>

我想使用Laravel在图表js上显示项目名称和时间

2 个答案: