Laravel-Admin下使用chartjs模板渲染问题一例

叶子最近在做图表的时候遇到一个问题。挣扎了很久。。。最后的最后才破案。。。 下面直接上代码：

后端代码：

//>计算起止时间相差月份
$month = $this->count_month($start_time,$end_time);
$pay_date = [];
for($i=0;$i结尾月份固定为$end_time
$pay_date[] = (string)date('Y-m',strtotime($end_time));

这样返回到前端后格式如下：

这样看来。后端返回数据就正常了。我们来看前端。。。下面第一个版本：

<canvas id="linePay" style="width:200px;height:50px;"></canvas>

    $(function () {
        var ctx = document.getElementById("linePay").getContext('2d');
        var smmyChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels:[
                    @foreach($pay_dates as $v)
                    {{$v}},
                    @endforeach
                ],
                datasets: [{
                    label: "收费金额",
                    data: [
                        @foreach($sum_pay as $v)
                        {{$v}},
                        @endforeach
                    ],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255,99,132,1)',
                    borderWidth: 1
                },
                ]
            },
            options: {
                barPercentage: 1.0,
                categoryPercentage: 1.0,
                legend:false,
                title: {
                    display: false,
                    text: '月收费金额'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        beginAtZero: true,
                    }],
                    yAxes: [{
                        ticks:{
                            min:0,
                            beginAtZero: true
                        },
                    }]
                }
            }
        });
    });

这样运行下来。chartjs直接把labels里的年-月当成了减法运算。。。导致了： 接下来一番折腾。是第二版本：

<canvas id="linePay" style="width:200px;height:50px;"></canvas>

    $(function () {
        var ctx = document.getElementById("linePay").getContext('2d');
        var smmyChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels:[
                    @foreach($pay_dates as $v)
                    {{(string)$v}},
                    @endforeach
                ],
                datasets: [{
                    label: "收费金额",
                    data: [
                        @foreach($sum_pay as $v)
                        {{$v}},
                        @endforeach
                    ],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255,99,132,1)',
                    borderWidth: 1
                },
                ]
            },
            options: {
                barPercentage: 1.0,
                categoryPercentage: 1.0,
                legend:false,
                title: {
                    display: false,
                    text: '月收费金额'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        beginAtZero: true,
                    }],
                    yAxes: [{
                        ticks:{
                            min:0,
                            beginAtZero: true
                        },
                    }]
                }
            }
        });
    });

以为强制string后可以达到效果。。。结果真的是然并卵。。。最后的最后。。。才突然想起是不是混编不识别这个东西。。。所以有了第三个版本：

<canvas id="linePay" style="width:200px;height:50px;"></canvas>

    $(function () {
        var ctx = document.getElementById("linePay").getContext('2d');
        var smmyChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels:[
                    @foreach($pay_dates as $v)
                    "{{$v}}",
                    @endforeach
                ],
                datasets: [{
                    label: "收费金额",
                    data: [
                        @foreach($sum_pay as $v)
                        {{$v}},
                        @endforeach
                    ],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255,99,132,1)',
                    borderWidth: 1
                },
                ]
            },
            options: {
                barPercentage: 1.0,
                categoryPercentage: 1.0,
                legend:false,
                title: {
                    display: false,
                    text: '月收费金额'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        beginAtZero: true,
                    }],
                    yAxes: [{
                        ticks:{
                            min:0,
                            beginAtZero: true
                        },
                    }]
                }
            }
        });
    });

运行后：

至此排除问题→_→

真真是轮引号的重要性。。。