Laravel 5.4 ChartJs - 使用集合/数组作为标签和数据

时间:2017-08-31 07:43:29

标签: javascript php laravel

我希望图表的标签和数据是动态的。

为了开始工作,我在search中有一个名为Controller的函数,它有一个这样的查询:

$total_cost = DB::raw('SUM(qty * cost) as total_cost');
$total_grossrev = DB::raw('(SUM(price * qty)) as total_grossrev');
$total_profit = DB::raw('(SUM(price * qty)) - (SUM(qty * cost)) as total_profit');

$period = DB::raw('date(created_at) as period');
$format = 'j F Y h:i A';

$salesanalysis = DB::table('orders')
    ->whereDate('created_at','>=', $request->datefrom)
    ->whereDate('created_at', '<=', $request->dateto)
    ->where('status', 'served')
    ->select($total_cost, $total_grossrev, $total_profit, $period, 'created_at')
    ->groupBy('period')
    ->get();

在我的脚本中有图表,这是我的结构:

<script src="{{ asset('js/Chart.min.js') }}"></script>

<script>
    let salesAnalysisChart = document.getElementById('salesAnalysisChart').getContext('2d');

    let barChart = new Chart(salesAnalysisChart, {
        responsive: true,
        type:'bar',
        data:{
            labels:[ //period of salesanalysis ],
            datasets:[{
                label:'Sales',
                data:[
                    // total_profit of salesanalysis
                ],
                backgroundColor: 'rgba(73, 187, 235, 0.7)',
                hoverBorderWidth: 1,
                hoverBorderColor: '#000'
            }]
        },
        options:{
            maintainAspectRatio: false,
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                    }
                }]
            },

            legend:{
                position:'bottom',
                display:false,
            },

            layout:{
                padding: 0,
            }
        }
    });
</script>

此外,销售分析的period将由Carbon使用$format进行解析。所以我想到使用这种语法:

{{\Carbon\Carbon::parse($collection->period)->format($format)}}

最重要的是,我将如何使用collection来获取ChartJ的labeldata

2 个答案:

答案 0 :(得分:0)

在视图的底部创建一个buildChart函数,该函数将标签,数据和任何其他函数作为参数。使用PHP implode方法传递它们并将刀片中的内爆变量返回到创建图表的函数。

//View
buildChart({{ $variable }}, ect)

答案 1 :(得分:0)

不知怎的,我设法解决了这个问题。

在我的import java.io.*; import java.net.*; import java.util.Properties; public class MyClient { public static void main(String args[]) { DatagramSocket datagramSocket; try { datagramSocket=new DatagramSocket(); //Creating Datagram socket String message=System.getProperties().toString(); //Creating message byte [] bytes=message.getBytes(); //Converting string message to byte format InetAddress host= InetAddress.getByName("localhost"); //Specifying server address int server_socket=6780; //Defining the socket tot be used //Sending DatagramPacket request= new DatagramPacket(bytes,bytes.length,host,server_socket); datagramSocket.send(request); //Receiving byte[] buffer=new byte[1000]; DatagramPacket reply= new DatagramPacket(buffer,buffer.length); datagramSocket.receive(reply); //Printing the reply System.out.println("Client Received: "+new String(reply.getData())); //Closing the socket datagramSocket.close(); } catch (Exception e) { } } } **Server.java** import javax.xml.crypto.Data; import java.io.*; import java.net.*; public class MyServer { public static void main(String[] args) { DatagramSocket datagramSocket=null; try { datagramSocket = new DatagramSocket(6780); byte[] buffer = new byte[1000]; int i=0; while (true) { DatagramPacket request = new DatagramPacket(buffer, buffer.length); datagramSocket.receive(request); String [] arrayMsg= (new String(request.getData())).split(" "); byte [] sendMessage=(arrayMsg[i]+" Server Processed").getBytes(); DatagramPacket reply=new DatagramPacket(sendMessage,sendMessage.length,request.getAddress(),request.getPort()); datagramSocket.send(reply); i++; } } catch (Exception e) { } } } 中,我做了一个查询并将其转换为数组:

controller

在我的$salesanalysisarray = DB::table('orders') ->whereDate('created_at','>=', $request->datefrom) ->whereDate('created_at', '<=', $request->dateto) ->where('status', 'served') ->select($total_cost, $total_grossrev, $total_profit, $period, 'created_at') ->groupBy('period') ->get() ->toArray(); 中,我初始化了另一个script并执行了循环以将每个数据推送到array本身:

array