在Laravel 5.1中实现Charts.js

Question

您好，我一直在网上寻找答案，但没有找到一个。我正在尝试使用Charts.js显示图表。

在我的路由中：

Route::get('surveys/chart', 'AboutController@projectChartData');

在我的AboutController中：我使用json_encode()将数据传递给我的视图。

public function projectChartData()
    {
        $devlist = json_encode(DB::table('surveys')
            ->select(DB::raw('MONTHNAME(updated_at) as month'), DB::raw("DATE_FORMAT(updated_at,'%Y-%m') as monthNum"),
                DB::raw('count(*) as projects'))
            ->groupBy('monthNum')
            ->get());

        return view('pages.chart',compact('devlist'));
    }

在我看来：

<canvas id="projects-graph" width="1000" height="400"></canvas>
<script type="text/javascript">
    $(function(){
        $.getJSON("surveys/chart", function (result) {
            alert('');
            var labels = [],data=[];
            for (var i = 0; i < result.length; i++) {
                labels.push(result[i].batch);
                data.push(result[i].created_at);
            }

            var buyerData = {
                labels : labels,
                datasets : [
                    {
                        fillColor : "rgba(240, 127, 110, 0.3)",
                        strokeColor : "#f56954",
                        pointColor : "#A62121",
                        pointStrokeColor : "#741F1F",
                        data : data
                    }
                ]
            };
            var buyers = document.getElementById('projects-graph').getContext('2d');
            new Chart(buyers).Line(buyerData, {
                bezierCurve : true
            });

        });

    });
</script>

问题是它没有显示图表。但是如果我只返回数据而不使用json_encode，它会给我一个数组()，但charts.js需要json。 我在Laravel 5中实现图表（morris，lavacharts，highcharts，charts.js）真的很困难，因为谷歌上没有太多适当的教程。如果有人可以给我一个好的包，我可以使用。非常感谢..

- Ikong

Answer 1

您将会把数据传递到视图中，在视图中只需像这样使用json_encode：{!! json_encode($devlist) !!}

- ARIF MAHMUD RANA

---

我知道我也可以这样做，但是如何将它放到 charts.js 中的 jquery 中呢？ - Ikong

如果您正在PHP文件中初始化chart.js，那么只需将Blade Echo放入您的JS代码中即可。但是，如果您使用单独的JS文件进行初始化，则必须声明一个对象并使用{!! json_encode($devlist) !!}进行初始化，然后使用该对象。 - ARIF MAHMUD RANA

你能否在我的视图中使用上述代码演示一下吗？ - Ikong