使用带有LARAVEL的HighCharts

Posted 2021-05-05

我想使用Highchart进行laravel但我不知道如何使用正确的语法将数据从控制器传递到刀片。实际上我正在使用静态数据，图表显示正确。

statistiche.blade.php

<div class="row">
    <div class="col-md-12">
        <div id="container2" style="height: 400px; min-width: 310px"></div>
    </div>
</div>

<script>
// Create the chart
        Highcharts.stockChart('container2', {

            rangeSelector: {
                selected: 1
            },

            title: {
                text: 'AAPL Stock Price'
            },

            plotOptions: {
                spline: {
                    marker: {
                        enabled: true
                    }
                }
            },

            series: [{
                name: 'Richieste scadute',
                data: [
                    [Date.UTC(1970, 9, 21), 0],
                    [Date.UTC(1970, 10, 4), 0.28],
                    [Date.UTC(1970, 10, 9), 0.25],
                    [Date.UTC(1970, 10, 27), 0.2],
                    [Date.UTC(1970, 11, 2), 0.28]
                ]
            }, {
                name: 'Richieste evase',
                data: [
                    [Date.UTC(1970, 9, 29), 0],
                    [Date.UTC(1970, 10, 9), 0.4],
                    [Date.UTC(1970, 11, 1), 0.25],
                    [Date.UTC(1971, 0, 1), 1.66],
                    [Date.UTC(1971, 0, 10), 1.8]
                ]
            }, {
                name: 'Richieste in attesa',
                data: [
                    [Date.UTC(1970, 10, 25), 0],
                    [Date.UTC(1970, 11, 6), 0.25],
                    [Date.UTC(1970, 11, 20), 1.41],
                    [Date.UTC(1970, 11, 25), 1.64],
                    [Date.UTC(1971, 0, 4), 1.6]
                ]
            }]
        });

我想使用控制器提取数据并将其传递到刀片。一些忠告？

答案

将数据传递到highcharts图有两种方法。

1）使用$.getJSON获取数据并填写系列。

$.getJSON("{{ route('get-json-route') }}", function(chart){
    var hashObj = {};
    var seriesObj = {};

    var graphs = {'dd':'graph dd', 'ld' : 'graph ld title'};

    for(var nam in graphs) {
        seriesObj['visible'] = 1;
        seriesObj['color'] = '#00CC00';
        seriesObj['name'] = chart[nam]['name'] + ' stats';
        seriesObj['data'] = chart[nam]['data'];
        highcharts.addSeries(seriesObj);
    }
    highcharts.redraw();
});

2）使用json_encode将数据直接传递到您的刀片模板：

seriesObj['data'] = {!! json_encode($data) !!};

另一答案

嘿老兄使用特殊图书馆：https://github.com/julles/laravel-highcharts

只需安装和工作：

composer require muhamadrezaar/highcharts