Laravel & chartjs 空白画布答案

【问题标题】：Laravel & chartjs blank canvasLaravel & chartjs 空白画布
【发布时间】：2020-03-24 07:29:33
【问题描述】：

在我的项目中，我使用 Laravel 7.2 和 ui bootstrap/vue，并希望显示来自 Chart.js 的图表。

我不想使用任何插件或模块，我更喜欢自己组织。

我已经尝试通过这篇文章实现：https://www.chartjs.org/docs/latest/getting-started/integration.html

但它显示了一个空的画布元素。

这是我的 app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        @include('layouts.navbar')
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

这是我的观点

    @extends('layouts.app')
    @section('content')
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">User online</div>
                    <div class="card-body">
                        @include('charts.useronline')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection

这是部分视图

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

是什么让我错了？任何想法？我可能以错误的顺序实现（我的意思是 .js 文件）？我找到了包含上面和下面脚本的示例。

【问题讨论】：

标签： javascript laravel charts chart.js

【解决方案1】：

尝试在“views/layouts/app.blade.php”中的laravel html模板中删除应用布局中的defer属性：

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

【讨论】：

考虑添加对使脚本不延迟的原因的解释。这样，答案将对其他人更有帮助并受到好评。