laravel-admin统计图表chartjs柱状图显示格式问题

一个坑掉进两次，还是记录一下比较稳妥。。。


chartjs.blade.php

<canvas id="myChart1" width="400" height="200"></canvas>
<script>
    $(function () {
        var ctx = document.getElementById("myChart1").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: <?php echo empty($chart_res['lab_up']) ? '' : $chart_res['lab_up']; ?>,
                datasets: [{
                    label: '<?php echo $chart_res['title']; ?>',
                    //数据类型 柱状图
                    type: "bar",
                    data: [{{ empty($chart_res['data_up'])?'':$chart_res['data_up'] }}],
                    backgroundColor: [
                        <?php echo empty($chart_res['rgba']) ? '' : $chart_res['rgba'];?>
                    ],
                    borderColor: [
                        <?php echo empty($chart_res['rgba_border']) ? '' : $chart_res['rgba_border'];?>
                    ],
                    borderWidth: 1
                }
                ]
            },

            options: {　　　　　　　　//显示数值
                "animation": {
                    "duration": 100,
                    "onComplete": function () {
                        var chartInstance = this.chart,
                                ctx = chartInstance.ctx;

                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);　　　　　　　　　　　　//设置字体颜色
                        ctx.fillStyle = "black";
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';

                        this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                var data = dataset.data[index];
                                ctx.fillText(data, bar._model.x, bar._model.y - 5);
                            });
                        });
                    }
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            callback: function (value, index, values) {
                                return value + '%';
                            }

                        }
                    }]
                }
            }
        });
    });
</script>

ChartjsController.php

use Encore\Admin\Widgets\Box;

$chart_res['lab_up'] = urldecode(json_encode($title_res_encode));
$chart_res['data_up'] = implode(',',$data_res);
$chart_res['rgba']='';
$chart_res['rgba_border']='';
$rgb = 1;
//颜色渐变
for($i=0;$i<count($data_res);$i++){
    $chart_res['rgba'] .= "'rgba(255, 99, 132, ".$rgb.")',";
    $chart_res['rgba_border'] .= "'red',";
    $rgb -= 0.02;
}
$doughnut = view('admin.chartjs',compact('chart_res'));
return new Box('柱状图', $doughnut);

其中x轴显示格式为：

// x轴显示的label
labels:['1月', '2月', '3月', '4月', '5月', '6月', '7月']

然而返回的数据格式为

"1月, 2月, 3月, 4月, 5月, 6月, 7月"
或
"'1月', '2月', '3月', '4月', '5月', '6月', '7月'"

傻乎乎的没反应过来转json~终于想起来了。。。

json_encode()后格式变成了这样

["\u6c38\u5eb7\u80e1\u540c1\u53f7\u9662","\u77e5\u6625\u8def2\u53f7\u9662","\u5357\u534e\u4e1c\u8857","\u65b0\u5965\u6d0b\u623f"]

还是不符合。。。

	$title_res_encode = [];
	foreach($title_res as $title){
		//url编码,避免json_encode将中文转为unicode
	    $title_res_encode[]=urlencode($title);
	}
	 //url解码,转完json后将各属性返回,确保对象属性不变
	 $labels=urldecode(json_encode($title_res_encode));

前端调用

labels: <?php echo empty($chart_res['lab_up']) ? '' : $chart_res['lab_up']; ?>,