Javascript 拉维公司；livewire图表显示不好
我正在用laravel 8和livewire开发一个应用程序。 在我的应用程序的刀片视图中，我需要插入一个图形，该图形被插入到我选择的模板中。 在模板中，我有一个示例文件，指示如何填充图形，名为Javascript 拉维公司；livewire图表显示不好,javascript,php,laravel-8,laravel-livewire,Javascript,Php,Laravel 8,Laravel Livewire,我正在用laravel 8和livewire开发一个应用程序。 在我的应用程序的刀片视图中，我需要插入一个图形，该图形被插入到我选择的模板中。 在模板中，我有一个示例文件，指示如何填充图形，名为morris init.js，然后在vendor/morris中，我有一个文件morris.min.js。 这两个Java脚本是从我的脚本和css配置文件dz.php中调用的。 在我的blade视图中，我有两个livewire组件，在第二个组件中我有一个表（正确显示）和带有相关脚本的图形。 我的问题是图形
morris init.jsvendor/morrismorris.min.jsdz.phpmorris init.jsmorris init.js- dz.php
您的代码中有几个错误：
- 以下几行应该放在browserChart对象的内部
像这样
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']
});
- 您的
元素是'morris'
，但在代码中有一个名为的div“morris\u donught”
，里面有一个嵌套的'morris'
，只需删除嵌套的元素并调用外部的morris
- 您的总数硬编码为62，但您的元素之和为122，图表将不正确显示
- 要显示6个数据标签，但只定义了3种颜色
{{-- 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
<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 €</th>
<th>% Posizioni</th>
<th>% Residuo</th>
<th>Valore Medio €</th>
</tr>
</thead>
<tbody>
@if($fascia1[0]['total'] !== 0)
<tr>
<td><span class="badge light badge-lg badge-info"> < 100 €</span></td>
<td>{{ $fascia1[0]['total'] }}</td>
<td>{{ $fascia1[0]['residuo'] }} €</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 €</td>
</tr>
@else
<tr>
<td><span class="badge light badge-lg badge-info"> < 100 €</span> </td>
<td>0</td>
<td>0 €</td>
<td>0 % </td>
<td>0 %</td>
<td>0 €</td>
</tr>
@endif
@if($fascia2[0]['total'] !== 0)
<tr>
<td><span class="badge light badge-lg badge-success">100 - 1000 €</span></td>
<td>{{ $fascia2[0]['total'] }}</td>
<td>{{ $fascia2[0]['residuo'] }} €</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 €</td>
</tr>
@else
<tr>
<td><span class="badge light badge-lg badge-success"> 100 - 1000 €</span></td>
<td>0</td>
<td>0 €</td>
<td>0 % </td>
<td>0 %</td>
<td>0 €</td>
</tr>
@endif
@if($fascia3[0]['total'] !== 0)
<tr>
<td><span class="badge light badge-lg badge-light">1000 - 5000 €</span></td>
<td>{{ $fascia3[0]['total'] }}</td>
<td>{{ $fascia3[0]['residuo'] }} €</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 €</td>
</tr>
@else
<tr>
<td><span class="badge light badge-lg badge-light"> 1000 - 5000 €</span></td>
<td>0</td>
<td>0 €</td>
<td>0 % </td>
<td>0 %</td>
<td>0 €</td>
</tr>
@endif
@if($fascia4[0]['total'] !== 0)
<tr>
<td><span class="badge light badge-lg badge-dark">5000 - 10000 €</span></td>
<td>{{ $fascia4[0]['total'] }}</td>
<td>{{ $fascia4[0]['residuo'] }} €</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 €</td>
</tr>
@else
<tr>
<td><span class="badge light badge-lg badge-dark"> 5000 - 10000 €</span> </td>
<td>0</td>
<td>0 €</td>
<td>0 % </td>
<td>0 %</td>
<td>0 €</td>
</tr>
@endif
@if($fascia5[0]['total'] !== 0)
<tr>
<td><span class="badge light badge-lg badge-warning">10000 - 20000 €</span></td>
<td>{{ $fascia5[0]['total'] }}</td>
<td>{{ $fascia5[0]['residuo'] }} €</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 €</td>
</tr>
@else
<tr>
<td><span class="badge light badge-lg badge-warning"> 10000 - 20000 € </span></td>
<td>0</td>
<td>0 €</td>
<td>0 % </td>
<td>0 %</td>
<td>0 €</td>
</tr>
@endif
@if($fascia6[0]['total'] !== 0)
<tr>
<td><span class="badge light badge-lg badge-danger"> > 2000 €</span></td>
<td>{{ $fascia6[0]['total'] }}</td>
<td>{{ $fascia6[0]['residuo'] }} €</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 €</td>
</tr>
@else
<tr>
<td><span class="badge light badge-lg badge-danger"> > 20000 €</span> </td>
<td>0</td>
<td>0 €</td>
<td>0 % </td>
<td>0 %</td>
<td>0 €</td>
</tr>
@endif
</tbody>
<tfoot>
<th></th>
<th>Tot posizioni: {{ $tot_posizioni }}</th>
<th>Tot residuo: {{ $tot_residuo }} €</th>
<th>100%</th>
<th>100%</th>
<th>Tot medio: @if($tot_posizioni != 0) {{ round($tot_residuo/$tot_posizioni, 2) }} @else 0 @endif €</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 €", value: 12},
{label: "Fascia 100 - 1000 €", value: 30},
{label: "Fascia 1000 - 5000 €", value: 20},
{label: "Fascia 5000 - 10000 €", value: 20},
{label: "Fascia 10000 - 20000 €", 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>
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']
});