VRAppointment-admin/resources/views/admin/chartjs/chartjs.blade.php

<div class="row">
    <div class="col-md-6" style="margin-top: 20px">
        <canvas id="line" style="width: 505px; display: block; height: 252px;" width="505" height="252"
                class="chartjs-render-monitor"></canvas>
        <script>
            $(function () {

                function randomScalingFactor() {
                    return Math.floor(Math.random() * 100)
                }

                function getDataLabels(type = 1) {
                    var labels = {}
                    $.ajax({
                        url: '/admin/getDataLabels',
                        type: 'get',
                        data: {type: type},
                        dataType: 'json',
                        async: false,
                        success: function (res) {
                            labels = res;
                        }
                    })
                    return labels;
                }

                function getData(type) {
                    var data = {}
                    $.ajax({
                        url: '/admin/data',
                        type: 'get',
                        data: {type: type},
                        dataType: 'json',
                        async: false,
                        success: function (res) {
                            data = res;
                        }
                    })
                    return data;
                }

                window.chartColors = {
                    red: 'rgb(255, 99, 132)',
                    orange: 'rgb(255, 159, 64)',
                    yellow: 'rgb(255, 205, 86)',
                    green: 'rgb(75, 192, 192)',
                    blue: 'rgb(54, 162, 235)',
                    purple: 'rgb(153, 102, 255)',
                    grey: 'rgb(201, 203, 207)'
                };
                var da = getData(1);
                var config = {
                    type: 'line',
                    data: {
                        labels: da[1]['labels'],
                        datasets: [{
                            label: '店铺1',
                            backgroundColor: window.chartColors.red,
                            borderColor: window.chartColors.red,
                            // data: getData(1, 1),
                            data: da[1]['data'],
                            fill: false,
                        }, {
                            label: '店铺2',
                            fill: false,
                            backgroundColor: window.chartColors.blue,
                            borderColor: window.chartColors.blue,
                            data: da[2]['data'],
                        },{
                            label: '店铺3',
                            fill: false,
                            backgroundColor: window.chartColors.orange,
                            borderColor: window.chartColors.orange,
                            data: da[3]['data'],
                        }]
                    },
                    options: {
                        responsive: true,
                        title: {
                            display: true,
                            text: '最近七日店铺用户量'
                        },
                        tooltips: {
                            mode: 'index',
                            intersect: false,
                        },
                        hover: {
                            mode: 'nearest',
                            intersect: true
                        },
                        scales: {
                            xAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: '日期'
                                }
                            }],
                            yAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: '用户数量'
                                }
                            }]
                        }
                    }
                };

                var ctx = document.getElementById('line').getContext('2d');
                new Chart(ctx, config);
            });
        </script>
    </div>

{{--    <div class="col-md-6" style="margin-top: 20px">--}}
{{--        <canvas id="bar-line" width="505" height="252"--}}
{{--                class="chartjs-render-monitor"></canvas>--}}
{{--        <script>--}}
{{--            $(function () {--}}

{{--                function randomScalingFactor() {--}}
{{--                    return Math.floor(Math.random() * 100)--}}
{{--                }--}}

{{--                function getDataLabels(type = 1) {--}}
{{--                    var labels = {}--}}
{{--                    $.ajax({--}}
{{--                        url: '/admin/getDataLabels',--}}
{{--                        type: 'get',--}}
{{--                        data: {type: type},--}}
{{--                        dataType: 'json',--}}
{{--                        async: false,--}}
{{--                        success: function (res) {--}}
{{--                            labels = res;--}}
{{--                        }--}}
{{--                    })--}}
{{--                    return labels;--}}
{{--                }--}}

{{--                function getData(type = 1) {--}}
{{--                    var data = {}--}}
{{--                    $.ajax({--}}
{{--                        url: '/admin/data',--}}
{{--                        type: 'get',--}}
{{--                        data: {type: type},--}}
{{--                        dataType: 'json',--}}
{{--                        async: false,--}}
{{--                        success: function (res) {--}}
{{--                            data = res;--}}
{{--                        }--}}
{{--                    })--}}
{{--                    return data;--}}
{{--                }--}}

{{--                window.chartColors = {--}}
{{--                    red: 'rgb(255, 99, 132)',--}}
{{--                    orange: 'rgb(255, 159, 64)',--}}
{{--                    yellow: 'rgb(255, 205, 86)',--}}
{{--                    green: 'rgb(75, 192, 192)',--}}
{{--                    blue: 'rgb(54, 162, 235)',--}}
{{--                    purple: 'rgb(153, 102, 255)',--}}
{{--                    grey: 'rgb(201, 203, 207)'--}}
{{--                };--}}

{{--                var chartData = {--}}
{{--                    labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '五月', '六月', '七月'],--}}
{{--                    datasets: [{--}}
{{--                        type: 'line',--}}
{{--                        label: '每天用户增长情况',--}}
{{--                        borderColor: window.chartColors.blue,--}}
{{--                        borderWidth: 2,--}}
{{--                        fill: false,--}}
{{--                        data: getData(1)--}}
{{--                    }, {--}}
{{--                        type: 'bar',--}}
{{--                        label: '模型 2',--}}
{{--                        backgroundColor: window.chartColors.red,--}}
{{--                        data: getData(2),--}}
{{--                        borderColor: 'white',--}}
{{--                        borderWidth: 2--}}
{{--                    }, {--}}
{{--                        type: 'bar',--}}
{{--                        label: '模型 3',--}}
{{--                        backgroundColor: window.chartColors.green,--}}
{{--                        data: getData(3)--}}
{{--                    }]--}}

{{--                };--}}

{{--                var ctx = document.getElementById('bar-line').getContext('2d');--}}
{{--                new Chart(ctx, {--}}
{{--                    type: 'bar',--}}
{{--                    data: chartData,--}}
{{--                    options: {--}}
{{--                        responsive: true,--}}
{{--                        title: {--}}
{{--                            display: true,--}}
{{--                            text: '用户模型'--}}
{{--                        },--}}
{{--                        tooltips: {--}}
{{--                            mode: 'index',--}}
{{--                            intersect: true--}}
{{--                        }--}}
{{--                    }--}}
{{--                });--}}
{{--            });--}}
{{--        </script>--}}
{{--    </div>--}}


{{--    --}}{{--    ////////////////////////////--}}

{{--    <div class="col-md-6" style="margin-top: 20px">--}}
{{--        <canvas id="scatter" style="width: 505px; display: block; height: 252px;" width="505" height="252"--}}
{{--                class="chartjs-render-monitor"></canvas>--}}
{{--        <script>--}}
{{--            $(function () {--}}
{{--                function randomScalingFactor() {--}}
{{--                    return Math.floor(Math.random() * 100)--}}
{{--                }--}}

{{--                window.chartColors = {--}}
{{--                    red: 'rgb(255, 99, 132)',--}}
{{--                    orange: 'rgb(255, 159, 64)',--}}
{{--                    yellow: 'rgb(255, 205, 86)',--}}
{{--                    green: 'rgb(75, 192, 192)',--}}
{{--                    blue: 'rgb(54, 162, 235)',--}}
{{--                    purple: 'rgb(153, 102, 255)',--}}
{{--                    grey: 'rgb(201, 203, 207)'--}}
{{--                };--}}

{{--                var ctx = document.getElementById("scatter").getContext('2d');--}}
{{--                var scatterChart = new Chart(ctx, {--}}
{{--                    type: 'scatter',--}}
{{--                    data: {--}}
{{--                        datasets: [{--}}
{{--                            label: 'My First dataset',--}}
{{--                            borderColor: window.chartColors.red,--}}
{{--                            data: [{--}}
{{--                                x: randomScalingFactor(),--}}
{{--                                y: randomScalingFactor(),--}}
{{--                            }, {--}}
{{--                                x: randomScalingFactor(),--}}
{{--                                y: randomScalingFactor(),--}}
{{--                            }, {--}}
{{--                                x: randomScalingFactor(),--}}
{{--                                y: randomScalingFactor(),--}}
{{--                            }, {--}}
{{--                                x: randomScalingFactor(),--}}
{{--                                y: randomScalingFactor(),--}}
{{--                            }, {--}}
{{--                                x: randomScalingFactor(),--}}
{{--                                y: randomScalingFactor(),--}}
{{--                            }, {--}}
{{--                                x: randomScalingFactor(),--}}
{{--                                y: randomScalingFactor(),--}}
{{--                            }, {--}}
{{--                                x: randomScalingFactor(),--}}
{{--                                y: randomScalingFactor(),--}}
{{--                            }]--}}
{{--                        }, {--}}
{{--                            label: 'My Second dataset',--}}
{{--                            borderColor: window.chartColors.blue,--}}
{{--                            data: [{--}}
{{--                                x: randomScalingFactor(),--}}
{{--                                y: randomScalingFactor(),--}}
{{--                            }, {--}}
{{--                                x: randomScalingFactor(),--}}
{{--                                y: randomScalingFactor(),--}}
{{--                            }, {--}}
{{--                                x: randomScalingFactor(),--}}
{{--                                y: randomScalingFactor(),--}}
{{--                            }, {--}}
{{--                                x: randomScalingFactor(),--}}
{{--                                y: randomScalingFactor(),--}}
{{--                            }, {--}}
{{--                                x: randomScalingFactor(),--}}
{{--                                y: randomScalingFactor(),--}}
{{--                            }, {--}}
{{--                                x: randomScalingFactor(),--}}
{{--                                y: randomScalingFactor(),--}}
{{--                            }, {--}}
{{--                                x: randomScalingFactor(),--}}
{{--                                y: randomScalingFactor(),--}}
{{--                            }]--}}
{{--                        }]--}}
{{--                    },--}}
{{--                    options: {--}}
{{--                        scales: {--}}
{{--                            xAxes: [{--}}
{{--                                type: 'linear',--}}
{{--                                position: 'bottom'--}}
{{--                            }]--}}
{{--                        }--}}
{{--                    }--}}
{{--                });--}}
{{--            });--}}
{{--        </script>--}}
{{--    </div>--}}
{{--    <div class="col-md-6" style="margin-top: 20px">--}}
{{--        <canvas id="doughnut" style="width: 505px; display: block; height: 252px;" width="505" height="252"--}}
{{--                class="chartjs-render-monitor"></canvas>--}}
{{--        <script>--}}
{{--            $(function () {--}}

{{--                function randomScalingFactor() {--}}
{{--                    return Math.floor(Math.random() * 100)--}}
{{--                }--}}

{{--                window.chartColors = {--}}
{{--                    red: 'rgb(255, 99, 132)',--}}
{{--                    orange: 'rgb(255, 159, 64)',--}}
{{--                    yellow: 'rgb(255, 205, 86)',--}}
{{--                    green: 'rgb(75, 192, 192)',--}}
{{--                    blue: 'rgb(54, 162, 235)',--}}
{{--                    purple: 'rgb(153, 102, 255)',--}}
{{--                    grey: 'rgb(201, 203, 207)'--}}
{{--                };--}}

{{--                var config = {--}}
{{--                    type: 'doughnut',--}}
{{--                    data: {--}}
{{--                        datasets: [{--}}
{{--                            data: [--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                            ],--}}
{{--                            backgroundColor: [--}}
{{--                                window.chartColors.red,--}}
{{--                                window.chartColors.orange,--}}
{{--                                window.chartColors.yellow,--}}
{{--                                window.chartColors.green,--}}
{{--                                window.chartColors.blue,--}}
{{--                            ],--}}
{{--                            label: 'Dataset 1'--}}
{{--                        }],--}}
{{--                        labels: [--}}
{{--                            'Red',--}}
{{--                            'Orange',--}}
{{--                            'Yellow',--}}
{{--                            'Green',--}}
{{--                            'Blue'--}}
{{--                        ]--}}
{{--                    },--}}
{{--                    options: {--}}
{{--                        responsive: true,--}}
{{--                        legend: {--}}
{{--                            position: 'top',--}}
{{--                        },--}}
{{--                        title: {--}}
{{--                            display: true,--}}
{{--                            text: 'Chart.js Doughnut Chart'--}}
{{--                        },--}}
{{--                        animation: {--}}
{{--                            animateScale: true,--}}
{{--                            animateRotate: true--}}
{{--                        }--}}
{{--                    }--}}
{{--                };--}}

{{--                var ctx = document.getElementById('doughnut').getContext('2d');--}}
{{--                new Chart(ctx, config);--}}
{{--            });--}}
{{--        </script>--}}
{{--    </div>--}}
{{--    <div class="col-md-6" style="margin-top: 20px">--}}
{{--        <canvas id="line-stacked" style="width: 505px; display: block; height: 252px;" width="505" height="252"--}}
{{--                class="chartjs-render-monitor"></canvas>--}}
{{--        <script>--}}
{{--            $(function () {--}}

{{--                function randomScalingFactor() {--}}
{{--                    return Math.floor(Math.random() * 100)--}}
{{--                }--}}

{{--                window.chartColors = {--}}
{{--                    red: 'rgb(255, 99, 132)',--}}
{{--                    orange: 'rgb(255, 159, 64)',--}}
{{--                    yellow: 'rgb(255, 205, 86)',--}}
{{--                    green: 'rgb(75, 192, 192)',--}}
{{--                    blue: 'rgb(54, 162, 235)',--}}
{{--                    purple: 'rgb(153, 102, 255)',--}}
{{--                    grey: 'rgb(201, 203, 207)'--}}
{{--                };--}}

{{--                var config = {--}}
{{--                    type: 'line',--}}
{{--                    data: {--}}
{{--                        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],--}}
{{--                        datasets: [{--}}
{{--                            label: 'My First dataset',--}}
{{--                            borderColor: window.chartColors.red,--}}
{{--                            backgroundColor: window.chartColors.red,--}}
{{--                            data: [--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor()--}}
{{--                            ],--}}
{{--                        }, {--}}
{{--                            label: 'My Second dataset',--}}
{{--                            borderColor: window.chartColors.blue,--}}
{{--                            backgroundColor: window.chartColors.blue,--}}
{{--                            data: [--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor()--}}
{{--                            ],--}}
{{--                        }, {--}}
{{--                            label: 'My Third dataset',--}}
{{--                            borderColor: window.chartColors.green,--}}
{{--                            backgroundColor: window.chartColors.green,--}}
{{--                            data: [--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor()--}}
{{--                            ],--}}
{{--                        }, {--}}
{{--                            label: 'My Third dataset',--}}
{{--                            borderColor: window.chartColors.yellow,--}}
{{--                            backgroundColor: window.chartColors.yellow,--}}
{{--                            data: [--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor(),--}}
{{--                                randomScalingFactor()--}}
{{--                            ],--}}
{{--                        }]--}}
{{--                    },--}}
{{--                    options: {--}}
{{--                        responsive: true,--}}
{{--                        title: {--}}
{{--                            display: true,--}}
{{--                            text: 'Chart.js Line Chart - Stacked Area'--}}
{{--                        },--}}
{{--                        tooltips: {--}}
{{--                            mode: 'index',--}}
{{--                        },--}}
{{--                        hover: {--}}
{{--                            mode: 'index'--}}
{{--                        },--}}
{{--                        scales: {--}}
{{--                            xAxes: [{--}}
{{--                                scaleLabel: {--}}
{{--                                    display: true,--}}
{{--                                    labelString: 'Month'--}}
{{--                                }--}}
{{--                            }],--}}
{{--                            yAxes: [{--}}
{{--                                stacked: true,--}}
{{--                                scaleLabel: {--}}
{{--                                    display: true,--}}
{{--                                    labelString: 'Value'--}}
{{--                                }--}}
{{--                            }]--}}
{{--                        }--}}
{{--                    }--}}
{{--                };--}}

{{--                var ctx = document.getElementById('line-stacked').getContext('2d');--}}
{{--                new Chart(ctx, config);--}}
{{--            });--}}
{{--        </script>--}}
{{--    </div>--}}
</div>