Laravel & livewire 图表显示不佳

Question

我正在使用 laravel 8 和 livewire 开发应用程序。在我的应用程序的 blade 视图中，我需要插入一个图表，该图表被插入到我选择的模板中。在模板中，我有一个示例文件，指示如何填充图形并称为 morris-init.js，然后在 vendor/morris 中，我有文件 morris.min.js。这两个 javascript 是从我的脚本和 css 配置文件 dz.php 中调用的。在我的 blade 视图中，我有两个 livewire 组件，在第二个组件中我有一个 table （显示正确）和带有相关脚本的图表。我的问题是图表显示正确，但不是我的脚本传递的数据，它使用 morris-init.js 文件中的数据。通过从配置文件中删除 morris-init.js 文件，图形不会在我的 livewire 组件中呈现。在控制台上，我注意到了这些错误（附有屏幕截图），但我不明白可能是什么问题。任何人对问题可能有什么建议或想法？谢谢大家！

我的代码：

dz.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Application Name
    |--------------------------------------------------------------------------
    |
    | This value is the name of your application. This value is used when the
    | framework needs to place the application's name in a notification or
    | any other location as required by the application or its packages.
    |
    */

    'name' => env('APP_NAME', 'C.U.O.RE'),


    'public' => [
        'favicon' => 'media/img/logo/favicon.ico',
        'logo' => 'images/cuore_logo/cuore-icon.png',
        'logo_text' => 'images/cuore_logo/Cuore - naming.png',
        'fonts' => [
            'google' => [
                'families' => [
                    'Poppins:300,400,500,600,700'
                ]
            ]
        ],
        'global' => [
            'css' => [
                'css/style.css',
            ],
            'js' => [
                'vendor/global/global.min.js',
            ],
        ],
        'pagelevel' => [
            'css' => [
                //start my custom css
                'dashboard_4_with_tables' =>[
                    'vendor/bootstrap-select/dist/css/bootstrap-select.min.css',
                    'vendor/jqvmap/css/jqvmap.min.css',
                    'vendor/chartist/css/chartist.min.css',
                    'https://cdn.lineicons.com/2.0/LineIcons.css',
                    'vendor/datatables/css/jquery.dataTables.min.css',
                    
                ],
                //end my custom css
                
            ],
            'js' => [
                // start my custom js
                'dashboard_4_with_tables' => [
                    'vendor/bootstrap-select/dist/js/bootstrap-select.min.js',
                    'vendor/chart.js/Chart.bundle.min.js',
                    'vendor/apexchart/apexchart.js',
                    'vendor/peity/jquery.peity.min.js',
                    'vendor/chartist/js/chartist.min.js',
                    'vendor/svganimation/vivus.min.js',
                    'vendor/svganimation/svg.animation.js',
                    'js/custom.js',
                    'js/dashboard/dashboard-4.js',
                    'vendor/datatables/js/jquery.dataTables.min.js',
                    'js/plugins-init/datatables.init.js',
                    'js/deznav-init.js',
                    'vendor/bootstrap-select/dist/js/bootstrap-select.min.js',
                    'vendor/chart.js/Chart.bundle.min.js',
                    'js/plugins-init/chartjs-init.js',
                    'vendor/svganimation/vivus.min.js',
                    'vendor/svganimation/svg.animation.js',
                    'js/custom.js',
                    'js/deznav-init.js',
                    'vendor/raphael/raphael.min.js',
                    'vendor/morris/morris.min.js',
                    'js/plugins-init/morris-init.js',
                ],

                // end my custom js
];

我的blade:

{{-- Extends layout --}}
@extends('layout.layout2')

{{-- Content --}}
@section('content')
<!-- row -->
<div class="container-fluid">
    <div class="row page-titles mx-0">
        <div class="col-sm-6 p-md-0">
          <div class="welcome-text">
            <h4>Report dei residui</h4>
            <p class="mb-0">Situazione dei residui per soggetto e per fasce di credito</p>
          </div>
        </div>
    </div>
    <!-- componente header-filter per raggruppare i residui per codice fiscale -->
    <livewire:report-residui-header-filter />
    <!-- importo il componente livewire per mostrare i residui -->
    <livewire:table-report-residui />
    <!-- importo il componente table-residui-fasce, con i residui suddivisi per fasce -->
    <livewire:table-report-residui-fasce />
    <!-- TODO -->
    <button class="btn btn-primary" id="export">Esporta Ricerca</button>
</div>
@endsection

我的组件 table & 图表：

<div class="row">
    <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h4 class="card-title">Report residui per fasce</h4>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-responsive-md" style="min-width: 845px">
                <thead>
                  <tr>
                    <th>Fascia</th>
                    <th># Posizioni</th>
                    <th>Residuo &euro;</th>
                    <th>% Posizioni</th>
                    <th>% Residuo</th>
                    <th>Valore Medio &euro;</th>
                  </tr>
                </thead>
                <tbody>
                  @if($fascia1[0]['total'] !== 0)
                    <tr>
                      <td><span class="badge light badge-lg badge-info"> < 100 &euro;</span></td>
                      <td>{{ $fascia1[0]['total'] }}</td>
                      <td>{{ $fascia1[0]['residuo'] }} &euro;</td>
                      <td>{{ round((100*$fascia1[0]['total'])/$tot_posizioni, 2) }} % </td>
                      <td>{{ round((100*$fascia1[0]['residuo'])/$tot_residuo , 2) }} %</td>
                      <td>@if(!empty($fascia1[0]['total'])) {{ round($fascia1[0]['residuo']/$fascia1[0]['total'], 2) }} @else  0 @endif &euro;</td>
                    </tr>
                  @else
                  <tr>
                    <td><span class="badge light badge-lg badge-info"> < 100 &euro;</span> </td>
                    <td>0</td>
                    <td>0 &euro;</td>
                    <td>0 % </td>
                    <td>0 %</td>
                    <td>0 &euro;</td>
                  </tr>
                  @endif
                  @if($fascia2[0]['total'] !== 0)
                    <tr>
                      <td><span class="badge light badge-lg badge-success">100 - 1000 &euro;</span></td>
                      <td>{{ $fascia2[0]['total'] }}</td>
                      <td>{{ $fascia2[0]['residuo'] }} &euro;</td>
                      <td>{{ round((100*$fascia2[0]['total'])/$tot_posizioni, 2) }} % </td>
                      <td>{{ round((100*$fascia2[0]['residuo'])/$tot_residuo , 2) }} %</td>
                      <td>@if(!empty($fascia2[0]['total'])) {{ round($fascia2[0]['residuo']/$fascia2[0]['total'], 2) }} @else  0 @endif &euro;</td>
                    </tr>
                  @else
                    <tr>
                      <td><span class="badge light badge-lg badge-success"> 100 - 1000 &euro;</span></td>
                      <td>0</td>
                      <td>0 &euro;</td>
                      <td>0 % </td>
                      <td>0 %</td>
                      <td>0 &euro;</td>
                    </tr>
                  @endif
                  @if($fascia3[0]['total'] !== 0) 
                  <tr>
                    <td><span class="badge light badge-lg badge-light">1000 - 5000 &euro;</span></td>
                    <td>{{ $fascia3[0]['total'] }}</td>
                    <td>{{ $fascia3[0]['residuo'] }} &euro;</td>
                    <td>{{ round((100*$fascia3[0]['total'])/$tot_posizioni, 2) }} % </td>
                    <td>{{ round((100*$fascia3[0]['residuo'])/$tot_residuo , 2) }} %</td>
                    <td>@if(!empty($fascia3[0]['total'])) {{ round($fascia3[0]['residuo']/$fascia3[0]['total'], 2) }} @else  0 @endif &euro;</td>
                  </tr>
                  @else
                  <tr>
                    <td><span class="badge light badge-lg badge-light"> 1000 - 5000 &euro;</span></td>
                    <td>0</td>
                    <td>0 &euro;</td>
                    <td>0 % </td>
                    <td>0 %</td>
                    <td>0 &euro;</td>
                  </tr>
                  @endif
                  @if($fascia4[0]['total'] !== 0)
                  <tr>
                    <td><span class="badge light badge-lg badge-dark">5000 - 10000 &euro;</span></td>
                    <td>{{ $fascia4[0]['total'] }}</td>
                    <td>{{ $fascia4[0]['residuo'] }} &euro;</td>
                    <td>{{ round((100*$fascia4[0]['total'])/$tot_posizioni, 2) }} % </td>
                    <td>{{ round((100*$fascia4[0]['residuo'])/$tot_residuo , 2) }} %</td>
                    <td>@if(!empty($fascia4[0]['total'])) {{ round($fascia4[0]['residuo']/$fascia4[0]['total'], 2) }} @else  0 @endif &euro;</td>
                  </tr>
                  @else
                  <tr>
                    <td><span class="badge light badge-lg badge-dark"> 5000 - 10000 &euro;</span> </td>
                    <td>0</td>
                    <td>0 &euro;</td>
                    <td>0 % </td>
                    <td>0 %</td>
                    <td>0 &euro;</td>
                  </tr>
                  @endif
                  @if($fascia5[0]['total'] !== 0)
                  <tr>
                    <td><span class="badge light badge-lg badge-warning">10000 - 20000 &euro;</span></td>
                    <td>{{ $fascia5[0]['total'] }}</td>
                    <td>{{ $fascia5[0]['residuo'] }} &euro;</td>
                    <td>{{ round((100*$fascia5[0]['total'])/$tot_posizioni, 2) }} % </td>
                    <td>{{ round((100*$fascia5[0]['residuo'])/$tot_residuo , 2) }} %</td>
                    <td>@if(!empty($fascia5[0]['total'])) {{ round($fascia5[0]['residuo']/$fascia5[0]['total'], 2) }} @else  0 @endif &euro;</td>
                  </tr>
                  @else
                  <tr>
                    <td><span class="badge light badge-lg badge-warning"> 10000 - 20000 &euro; </span></td>
                    <td>0</td>
                    <td>0 &euro;</td>
                    <td>0 % </td>
                    <td>0 %</td>
                    <td>0 &euro;</td>
                  </tr>
                  @endif
                  @if($fascia6[0]['total'] !== 0)
                  <tr>
                    <td><span class="badge light badge-lg badge-danger"> > 2000 &euro;</span></td>
                    <td>{{ $fascia6[0]['total'] }}</td>
                    <td>{{ $fascia6[0]['residuo'] }} &euro;</td>
                    <td>{{ round((100*$fascia6[0]['total'])/$tot_posizioni, 2)}} % </td>
                    <td>{{ round((100*$fascia6[0]['residuo'])/$tot_residuo , 2) }} %</td>
                    <td>@if(!empty($fascia6[0]['total'])) {{ round($fascia6[0]['residuo']/$fascia6[0]['total'], 2) }} @else  0 @endif &euro;</td>
                  </tr>
                  @else
                  <tr>
                    <td><span class="badge light badge-lg badge-danger"> > 20000 &euro;</span> </td>
                    <td>0</td>
                    <td>0 &euro;</td>
                    <td>0 % </td>
                    <td>0 %</td>
                    <td>0 &euro;</td>
                  </tr>
                  @endif
                </tbody>
                <tfoot>
                  <th></th>
                  <th>Tot posizioni: {{ $tot_posizioni }}</th>
                  <th>Tot residuo: {{ $tot_residuo }} &euro;</th>
                  <th>100%</th>
                  <th>100%</th>
                  <th>Tot medio: @if($tot_posizioni != 0) {{ round($tot_residuo/$tot_posizioni, 2) }} @else 0 @endif &euro;</th>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
    </div>
    <!-- grafichiamo i risultati stampati in tabella -->
    <div class="col-xl-6 col-lg-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Residui per fasce</h4>
        </div>
        <div class="card-body">
          <div id="morris_donught" class="morris_chart_height">
            <div id="morris">
                
            </div>
          </div>
        </div>
      </div>
    </div>
    
</div>
<script type="text/javascript">
    console.log('Sono entrato nel codice js');
    //Codice per popolare il grafico
        
        var setChartWidth = function(){
            if(screenWidth <= 768)
            {
                var chartBlockWidth = 0;
                chartBlockWidth = (screenWidth < 300 )?screenWidth:300;
                jQuery('.morris_chart_height').css('min-width',chartBlockWidth - 31);
            }
        }

    let Data= [
        {label: "Fascia < 100 &euro;", value: 12},
        {label: "Fascia 100 - 1000 &euro;", value: 30},
        {label: "Fascia 1000 - 5000 &euro;", value: 20},
        {label: "Fascia 5000 - 10000 &euro;", value: 20},
        {label: "Fascia 10000 - 20000 &euro;", value: 20},
        {label: "Fascia > 20000 $euro;", value: 20},
  ];
    let total = 62;
  var browsersChart = Morris.Donut({
    element: 'morris',
    data: Data,
    formatter: function (value, data) { 
      return Math.floor(value/total*100) + '%'; 
    }
  }),
  resize = true,
                redraw = true,
                colors = ['#3a7afe', 'rgb(255, 159, 0)', '#10ca93'];

</script>

我的控制台屏幕：

Answer 1

您的代码中有几个错误：

以下几行应该放在您的 browserChart 对象中

resize = true,
redraw = true,
colors = ['#3a7afe', 'rgb(255, 159, 0)', '#10ca93'];

像这样

var browsersChart = Morris.Donut({
            element: 'morris', 
            data: Data,
            formatter: function(value, data) {
                return Math.floor(value / total * 100) + '%';
            },
            resize: true,
            redraw: true,
            colors: ['#3a7afe', 'rgb(255, 159, 0)', '#10ca93']
        });

你的 element 是 'morris' 但在你的代码中你有一个名为 "morris_donught" 的 div 里面有一个嵌套的 'morris'，只需删除嵌套的并调用外部的 morris
你的总数被硬编码为 62 但你的元素总和是 122，图表将显示不正确
您有 6 个数据标签要显示，但您只定义了 3 种颜色

Laravel & livewire 图表显示不佳

Laravel & livewire chart not displayed well

javascript

php

laravel-livewire

laravel-8