javascript - 通过 JS 填充图表
问题描述
我正在使用 Laravel 8 开发一个应用程序。
为了应用程序的需要，我选择了一个包含图形的引导模板，并且我必须根据从查询中获得的数据来填充该模板。在模板中，我有一个示例 morris-init.js 文件，但我不明白如何使用它在需要它的页面上填充我的图表。
谁能帮我理解如何使用示例文件？我试图将它复制到我需要它的页面，但我什么也没得到。
这是我的代码：
- js示例文件：
(function($) {
"use strict"
var dzMorris = function(){
var screenWidth = $(window).width();
var setChartWidth = function(){
if(screenWidth <= 768)
{
var chartBlockWidth = 0;
chartBlockWidth = (screenWidth < 300 )?screenWidth:300;
jQuery('.morris_chart_height').css('min-width',chartBlockWidth - 31);
}
}
var donutChart = function(){
Morris.Donut({
element: 'morris_donught',
data: [{
label: "\xa0 \xa0 Download Sales \xa0 \xa0",
value: 12,
}, {
label: "\xa0 \xa0 In-Store Sales \xa0 \xa0",
value: 30
}, {
label: "\xa0 \xa0 Mail-Order Sales \xa0 \xa0",
value: 20
}],
resize: true,
redraw: true,
colors: ['#3a7afe', 'rgb(255, 159, 0)', '#10ca93'],
//responsive:true,
});
}
var lineChart = function(){
//line chart
let line = new Morris.Line({
element: 'morris_line',
resize: true,
data: [{
y: '2011 Q1',
item1: 2666
},
{
y: '2011 Q2',
item1: 2778
},
{
y: '2011 Q3',
item1: 4912
},
{
y: '2011 Q4',
item1: 3767
},
{
y: '2012 Q1',
item1: 6810
},
{
y: '2012 Q2',
item1: 5670
},
{
y: '2012 Q3',
item1: 4820
},
{
y: '2012 Q4',
item1: 15073
},
{
y: '2013 Q1',
item1: 10687
},
{
y: '2013 Q2',
item1: 8432
}
],
xkey: 'y',
ykeys: ['item1'],
labels: ['Item 1'],
gridLineColor: 'transparent',
lineColors: ['rgb(58, 122, 254)'], //here
lineWidth: 1,
hideHover: 'auto',
pointSize: 0,
axes: false
});
}
var lineChart2 = function(){
//Area chart
Morris.Area({
element: 'line_chart_2',
data: [{
period: '2001',
smartphone: 0,
windows: 0,
mac: 0
}, {
period: '2002',
smartphone: 90,
windows: 60,
mac: 25
}, {
period: '2003',
smartphone: 40,
windows: 80,
mac: 35
}, {
period: '2004',
smartphone: 30,
windows: 47,
mac: 17
}, {
period: '2005',
smartphone: 150,
windows: 40,
mac: 120
}, {
period: '2006',
smartphone: 25,
windows: 80,
mac: 40
}, {
period: '2007',
smartphone: 10,
windows: 10,
mac: 10
}
],
xkey: 'period',
ykeys: ['smartphone', 'windows', 'mac'],
labels: ['Phone', 'Windows', 'Mac'],
pointSize: 3,
fillOpacity: 0,
pointStrokeColors: ['#f25767', '#10ca93', '#3a7afe'],
behaveLikeLine: true,
gridLineColor: 'transparent',
lineWidth: 3,
hideHover: 'auto',
lineColors: ['rgb(242, 87, 103)', 'rgb(0, 171, 197)', '#3a7afe'],
resize: true
});
}
var barChart = function(){
//bar chart
Morris.Bar({
element: 'morris_bar',
data: [{
y: '2006',
a: 100,
b: 90,
c: 60
}, {
y: '2007',
a: 75,
b: 65,
c: 40
}, {
y: '2008',
a: 50,
b: 40,
c: 30
}, {
y: '2009',
a: 75,
b: 65,
c: 40
}, {
y: '2010',
a: 50,
b: 40,
c: 30
}, {
y: '2011',
a: 75,
b: 65,
c: 40
}, {
y: '2012',
a: 100,
b: 90,
c: 40
}],
xkey: 'y',
ykeys: ['a', 'b', 'c'],
labels: ['A', 'B', 'C'],
barColors: ['#3a7afe', '#10ca93', '#ff9f00'],
hideHover: 'auto',
gridLineColor: 'transparent',
resize: true,
barSizeRatio: 0.25,
});
}
var barStalkChart = function(){
//bar chart
Morris.Bar({
element: 'morris_bar_stalked',
data: [{
y: 'S',
a: 66,
b: 34
}, {
y: 'M',
a: 75,
b: 25
}, {
y: 'T',
a: 50,
b: 50
}, {
y: 'W',
a: 75,
b: 25
}, {
y: 'T',
a: 50,
b: 50
}, {
y: 'F',
a: 16,
b: 84
}, {
y: 'S',
a: 70,
b: 30
}, {
y: 'S',
a: 30,
b: 70
}, {
y: 'M',
a: 40,
b: 60
}, {
y: 'T',
a: 29,
b: 71
}, {
y: 'W',
a: 44,
b: 56
}, {
y: 'T',
a: 30,
b: 70
}, {
y: 'F',
a: 60,
b: 40
}, {
y: 'G',
a: 40,
b: 60
}, {
y: 'S',
a: 46,
b: 54
}],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['A', 'B'],
barColors: ['#3a7afe', "#F1F3F7"],
hideHover: 'auto',
gridLineColor: 'transparent',
resize: true,
barSizeRatio: 0.25,
stacked: true,
behaveLikeLine: true,
//redraw: true
// barRadius: [6, 6, 0, 0]
});
}
var areaChart = function(){
//area chart
Morris.Area({
element: 'morris_area',
data: [{
period: '2001',
smartphone: 0,
windows: 0,
mac: 0
}, {
period: '2002',
smartphone: 90,
windows: 60,
mac: 25
}, {
period: '2003',
smartphone: 40,
windows: 80,
mac: 35
}, {
period: '2004',
smartphone: 30,
windows: 47,
mac: 17
}, {
period: '2005',
smartphone: 150,
windows: 40,
mac: 120
}, {
period: '2006',
smartphone: 25,
windows: 80,
mac: 40
}, {
period: '2007',
smartphone: 10,
windows: 10,
mac: 10
}
],
lineColors: ['#3a7afe', 'rgb(16, 202, 147)', 'rgb(255, 159, 0)'],
xkey: 'period',
ykeys: ['smartphone', 'windows', 'mac'],
labels: ['Phone', 'Windows', 'Mac'],
pointSize: 0,
lineWidth: 0,
resize: true,
fillOpacity: 0.95,
behaveLikeLine: true,
gridLineColor: 'transparent',
hideHover: 'auto'
});
}
var areaChart2 = function(){
//area chart
Morris.Area({
element: 'morris_area_2',
data: [{
period: '2010',
SiteA: 0,
SiteB: 0,
}, {
period: '2011',
SiteA: 130,
SiteB: 100,
}, {
period: '2012',
SiteA: 80,
SiteB: 60,
}, {
period: '2013',
SiteA: 70,
SiteB: 200,
}, {
period: '2014',
SiteA: 180,
SiteB: 150,
}, {
period: '2015',
SiteA: 105,
SiteB: 90,
},
{
period: '2016',
SiteA: 250,
SiteB: 150,
}
],
xkey: 'period',
ykeys: ['SiteA', 'SiteB'],
labels: ['Site A', 'Site B'],
pointSize: 0,
fillOpacity: 0.6,
pointStrokeColors: ['#b4becb', '#00A2FF'], //here
behaveLikeLine: true,
gridLineColor: 'transparent',
lineWidth: 0,
smooth: false,
hideHover: 'auto',
lineColors: ['rgb(0, 171, 197)', 'rgb(0, 0, 128)'],
resize: true
});
}
/* Function ============ */
return {
init:function(){
},
load:function(){
setChartWidth();
donutChart();
lineChart();
lineChart2();
barChart();
barStalkChart();
areaChart();
areaChart2();
},
resize:function(){
screenWidth = $(window).width();
setChartWidth();
donutChart();
lineChart();
lineChart2();
barChart();
barStalkChart();
areaChart();
areaChart2();
}
}
}();
jQuery(document).ready(function(){
});
jQuery(window).on('load',function(){
dzMorris.load();
});
jQuery(window).on('resize',function(){
dzMorris.resize();
});
})(jQuery);
我的观点：
<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(!empty($fascia1))
<tr>
<td><span class="badge light badge-lg badge-info"> < 100 €</span></td>
<td>{{ $fascia1[0]['total'] }}</td>
<td>{{ $fascia1[0]['residuo'] }} €</td>
<td>{{ (100*$fascia1[0]['total'])/$tot_posizioni}} % </td>
<td>{{ (100*$fascia1[0]['residuo'])/$tot_residuo}} %</td>
<td>{{ round($fascia1[0]['residuo']/$fascia1[0]['total'], 2) }} €</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(!empty($fascia2))
<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>{{ (100*$fascia2[0]['total'])/$tot_posizioni}} % </td>
<td>{{ (100*$fascia2[0]['residuo'])/$tot_residuo}} %</td>
<td>{{ round($fascia2[0]['residuo']/$fascia2[0]['total'], 2) }} €</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(!empty($fascia3))
<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>{{ (100*$fascia3[0]['total'])/$tot_posizioni}} % </td>
<td>{{ (100*$fascia3[0]['residuo'])/$tot_residuo}} %</td>
<td>{{ round($fascia3[0]['residuo']/$fascia3[0]['total'], 2) }} €</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(!empty($fascia4))
<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>{{ (100*$fascia4[0]['total'])/$tot_posizioni}} % </td>
<td>{{ (100*$fascia4[0]['residuo'])/$tot_residuo}} %</td>
<td>{{ round($fascia4[0]['residuo']/$fascia4[0]['total'], 2) }} €</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(!empty($fascia5))
<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>{{ (100*$fascia5[0]['total'])/$tot_posizioni}} % </td>
<td>{{ (100*$fascia5[0]['residuo'])/$tot_residuo}} %</td>
<td>{{ round($fascia5[0]['residuo']/$fascia5[0]['total'], 2) }} €</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(!empty($fascia6))
<tr>
<td><span class="badge light badge-lg badge-danger"> > 2000 €</span></td>
<td>{{ $fascia6[0]['total'] }}</td>
<td>{{ $fascia6[0]['residuo'] }} €</td>
<td>{{ (100*$fascia6[0]['total'])/$tot_posizioni}} % </td>
<td>{{ (100*$fascia6[0]['residuo'])/$tot_residuo}} %</td>
<td>{{ round($fascia6[0]['residuo']/$fascia6[0]['total'], 2) }} €</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: {{ round($tot_residuo/$tot_posizioni, 2) }} €</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>
</div>
</div>
</div>
</div>
<script>
//here i've copied the js example code ( I NEED ONLY donutChart )
(function($) {
"use strict"
var dzMorris = function(){
var screenWidth = $(window).width();
var setChartWidth = function(){
if(screenWidth <= 768)
{
var chartBlockWidth = 0;
chartBlockWidth = (screenWidth < 300 )?screenWidth:300;
jQuery('.morris_chart_height').css('min-width',chartBlockWidth - 31);
}
}
var donutChart = function(){
Morris.Donut({
element: 'morris_donught',
data: [{
label: "\xa0 \xa0 Download Sales \xa0 \xa0",
value: 12,
}, {
label: "\xa0 \xa0 In-Store Sales \xa0 \xa0",
value: 30
}, {
label: "\xa0 \xa0 Mail-Order Sales \xa0 \xa0",
value: 20
}],
resize: true,
redraw: true,
colors: ['#3a7afe', 'rgb(255, 159, 0)', '#10ca93'],
//responsive:true,
});
}
var lineChart = function(){
//line chart
let line = new Morris.Line({
element: 'morris_line',
resize: true,
data: [{
y: '2011 Q1',
item1: 2666
},
{
y: '2011 Q2',
item1: 2778
},
{
y: '2011 Q3',
item1: 4912
},
{
y: '2011 Q4',
item1: 3767
},
{
y: '2012 Q1',
item1: 6810
},
{
y: '2012 Q2',
item1: 5670
},
{
y: '2012 Q3',
item1: 4820
},
{
y: '2012 Q4',
item1: 15073
},
{
y: '2013 Q1',
item1: 10687
},
{
y: '2013 Q2',
item1: 8432
}
],
xkey: 'y',
ykeys: ['item1'],
labels: ['Item 1'],
gridLineColor: 'transparent',
lineColors: ['rgb(58, 122, 254)'], //here
lineWidth: 1,
hideHover: 'auto',
pointSize: 0,
axes: false
});
}
var lineChart2 = function(){
//Area chart
Morris.Area({
element: 'line_chart_2',
data: [{
period: '2001',
smartphone: 0,
windows: 0,
mac: 0
}, {
period: '2002',
smartphone: 90,
windows: 60,
mac: 25
}, {
period: '2003',
smartphone: 40,
windows: 80,
mac: 35
}, {
period: '2004',
smartphone: 30,
windows: 47,
mac: 17
}, {
period: '2005',
smartphone: 150,
windows: 40,
mac: 120
}, {
period: '2006',
smartphone: 25,
windows: 80,
mac: 40
}, {
period: '2007',
smartphone: 10,
windows: 10,
mac: 10
}
],
xkey: 'period',
ykeys: ['smartphone', 'windows', 'mac'],
labels: ['Phone', 'Windows', 'Mac'],
pointSize: 3,
fillOpacity: 0,
pointStrokeColors: ['#f25767', '#10ca93', '#3a7afe'],
behaveLikeLine: true,
gridLineColor: 'transparent',
lineWidth: 3,
hideHover: 'auto',
lineColors: ['rgb(242, 87, 103)', 'rgb(0, 171, 197)', '#3a7afe'],
resize: true
});
}
var barChart = function(){
//bar chart
Morris.Bar({
element: 'morris_bar',
data: [{
y: '2006',
a: 100,
b: 90,
c: 60
}, {
y: '2007',
a: 75,
b: 65,
c: 40
}, {
y: '2008',
a: 50,
b: 40,
c: 30
}, {
y: '2009',
a: 75,
b: 65,
c: 40
}, {
y: '2010',
a: 50,
b: 40,
c: 30
}, {
y: '2011',
a: 75,
b: 65,
c: 40
}, {
y: '2012',
a: 100,
b: 90,
c: 40
}],
xkey: 'y',
ykeys: ['a', 'b', 'c'],
labels: ['A', 'B', 'C'],
barColors: ['#3a7afe', '#10ca93', '#ff9f00'],
hideHover: 'auto',
gridLineColor: 'transparent',
resize: true,
barSizeRatio: 0.25,
});
}
var barStalkChart = function(){
//bar chart
Morris.Bar({
element: 'morris_bar_stalked',
data: [{
y: 'S',
a: 66,
b: 34
}, {
y: 'M',
a: 75,
b: 25
}, {
y: 'T',
a: 50,
b: 50
}, {
y: 'W',
a: 75,
b: 25
}, {
y: 'T',
a: 50,
b: 50
}, {
y: 'F',
a: 16,
b: 84
}, {
y: 'S',
a: 70,
b: 30
}, {
y: 'S',
a: 30,
b: 70
}, {
y: 'M',
a: 40,
b: 60
}, {
y: 'T',
a: 29,
b: 71
}, {
y: 'W',
a: 44,
b: 56
}, {
y: 'T',
a: 30,
b: 70
}, {
y: 'F',
a: 60,
b: 40
}, {
y: 'G',
a: 40,
b: 60
}, {
y: 'S',
a: 46,
b: 54
}],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['A', 'B'],
barColors: ['#3a7afe', "#F1F3F7"],
hideHover: 'auto',
gridLineColor: 'transparent',
resize: true,
barSizeRatio: 0.25,
stacked: true,
behaveLikeLine: true,
//redraw: true
// barRadius: [6, 6, 0, 0]
});
}
var areaChart = function(){
//area chart
Morris.Area({
element: 'morris_area',
data: [{
period: '2001',
smartphone: 0,
windows: 0,
mac: 0
}, {
period: '2002',
smartphone: 90,
windows: 60,
mac: 25
}, {
period: '2003',
smartphone: 40,
windows: 80,
mac: 35
}, {
period: '2004',
smartphone: 30,
windows: 47,
mac: 17
}, {
period: '2005',
smartphone: 150,
windows: 40,
mac: 120
}, {
period: '2006',
smartphone: 25,
windows: 80,
mac: 40
}, {
period: '2007',
smartphone: 10,
windows: 10,
mac: 10
}
],
lineColors: ['#3a7afe', 'rgb(16, 202, 147)', 'rgb(255, 159, 0)'],
xkey: 'period',
ykeys: ['smartphone', 'windows', 'mac'],
labels: ['Phone', 'Windows', 'Mac'],
pointSize: 0,
lineWidth: 0,
resize: true,
fillOpacity: 0.95,
behaveLikeLine: true,
gridLineColor: 'transparent',
hideHover: 'auto'
});
}
var areaChart2 = function(){
//area chart
Morris.Area({
element: 'morris_area_2',
data: [{
period: '2010',
SiteA: 0,
SiteB: 0,
}, {
period: '2011',
SiteA: 130,
SiteB: 100,
}, {
period: '2012',
SiteA: 80,
SiteB: 60,
}, {
period: '2013',
SiteA: 70,
SiteB: 200,
}, {
period: '2014',
SiteA: 180,
SiteB: 150,
}, {
period: '2015',
SiteA: 105,
SiteB: 90,
},
{
period: '2016',
SiteA: 250,
SiteB: 150,
}
],
xkey: 'period',
ykeys: ['SiteA', 'SiteB'],
labels: ['Site A', 'Site B'],
pointSize: 0,
fillOpacity: 0.6,
pointStrokeColors: ['#b4becb', '#00A2FF'], //here
behaveLikeLine: true,
gridLineColor: 'transparent',
lineWidth: 0,
smooth: false,
hideHover: 'auto',
lineColors: ['rgb(0, 171, 197)', 'rgb(0, 0, 128)'],
resize: true
});
}
/* Function ============ */
return {
init:function(){
},
load:function(){
setChartWidth();
donutChart();
lineChart();
lineChart2();
barChart();
barStalkChart();
areaChart();
areaChart2();
},
resize:function(){
screenWidth = $(window).width();
setChartWidth();
donutChart();
lineChart();
lineChart2();
barChart();
barStalkChart();
areaChart();
areaChart2();
}
}
}();
jQuery(document).ready(function(){
});
jQuery(window).on('load',function(){
dzMorris.load();
});
jQuery(window).on('resize',function(){
dzMorris.resize();
});
})(jQuery);
</script>
解决方案
- 我的刀片文件中的图表代码：
<!-- 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="donut"> // this is the <div> you indicated to me
</div>
</div>
</div>
</div>
</div>
这是我在刀片末尾的脚本：
<script>
//here my code
let Data= [
{label: "Download Sales", value: 12},
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}
];
let total = 62;
var browsersChart = Morris.Donut({
element: 'donut',
data: Data,
formatter: function (value, data) {
return Math.floor(value/total*100) + '%';
}
});
</script>
推荐阅读
- node.js - DynamoDb：如何根据具有最高编号的列获取项目？
- python - 如何创建具有特定 dtype 的新 Pandas 列？
- go - 处理程序提供服务后，如何从请求对象中取回记录器对象？
- rails-activestorage - 如何缩短 Rails Active Storage url 链接太长
- java - 如何遍历列表列表以操作内部列表的内容？
- sql - 如何在 Snowflake 中重命名表的多个列？
- java - Apache Commons CSVParser - 如何将列拆分为单独的键？
- python - 监控估算器进度和 sklearn 包装器
- html - 用 v-html 绑定图片
- java - 如何更改 Apache Tomcat 9 的 Java 版本