كيفية استخدام الرسوم البياني لجوجل (Using Google Charts)
الخطوة الأولى: في البداية يجب إضافة الاستدعاء في ملف الـ index.html
<!doctype html>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<title>بوابة اليحيى</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/img/logos/circle_logo.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">
<!-- Animations -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<!-- For Google -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>
الخطوة الثانية: إنشاء مكوّن خاص بالرسم البياني، وهذه هي محتويات ملفاته
الـ HTML
<div #piechart style="border-radius: 50px 20px; width: 100%; height: 100%; min-height: 250px !important;max-height: 250px !important;"></div>
الـ TS
import { AfterViewInit, Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core';
declare var google: any;
@Component({
selector: 'app-google-chart',
templateUrl: './google-chart.component.html',
styleUrls: ['./google-chart.component.scss']
})
export class GoogleChartComponent {
constructor() { }
@Input('data') data: any = ['الموقع', 'الإيداعات'];
@Input('title') title: string = "المجموعة الأولى";
@ViewChild('piechart') pieChart: ElementRef
drawChart = (a: string, b: any) => {
var data = google.visualization.arrayToDataTable(b);
var options = {
legend: {
position: 'bottom',
maxLines: 3
},
title: a,
//subtitle: 'Sales, Expenses, and Profit: 2014-2017',
is3D: false,
fontName: 'DroidKufi-Regular',
fontSize: 15,
bold: true,
italic: true,
pieSliceText: 'لا توجد بيانات مدخلة',
// The color of the text.
color: '#871b47',
innerHeight: '100%',
// The color of the text outline.
auraColor: '#d799ae',
// The transparency of the text.
opacity: 0.8,
backgroundColor: {
gradient: {
// Start color for gradient.
color1: '#ffffff',
// Finish color for gradient.
color2: '#ffffff',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
x1: '0%', y1: '0%',
x2: '100%', y2: '100%',
// If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
useObjectBoundingBoxUnits: true
},
},
};
var chart = new google.visualization.PieChart(this.pieChart.nativeElement);
chart.draw(data, options);
}
async ngAfterViewInit() {
await google.charts.load('current', { 'packages': ['corechart'] });
await google.charts.setOnLoadCallback(this.drawChart(this.title, this.data));
}
async ngOnChanges() {
await google.charts.load('current', { 'packages': ['corechart'] });
await google.charts.setOnLoadCallback(this.drawChart(this.title, this.data));
}
}
ملاحظة: ملف الـ scss فارغ
طريقة الاستدعاء:
1- الطريقة العادية:
<app-google-chart [title]="'الأصول حسب الحالة'" [data]="dataTableGroupB"></app-google-chart>
ملف الـ ts
dataTableGroupB: any = [['الموقع', 'الإيداعات'], ['الأصول النشطة', 30], ['الأصول غير المستخدمة', 60]];
2- طريقة بالدوران:
this.dataTableGroupB = null;
this.dataTableGroupB = [['الموقع', 'الإيداعات']];
this.groupB.forEach(element => {
this.dataTableGroupB.push([element.branch.ar_name, element.actual_collection]);
});
-------------------------------------------------------------------------------------------------------------------
الواجهة الخلفية:
الخدمة:
async getVendorsWithoutDuplicate() {
let query: any = await this.assetRepository.query("Select DISTINCT vendor from assets");
let all = '';
let dataTable = [['key', 'value']];
for (let item of query) {
all = (await this.totalByVendor(item.vendor)).toString();
dataTable.push([item.vendor, Number(all)]);
}
return dataTable;
}
//---------------------------------------------------------------------------------
async getClassificationsWithoutDuplicate(lang: string) {
let query: any = await this.assetRepository.query("Select DISTINCT classificationId from assets");
let all = '';
let key: any = '';
let dataTable = [['key', 'value']];
for (let item of query) {
all = (await this.getCountClassification(item.classificationId)).toString();
key = await this.getClassificationById(item.classificationId);
dataTable.push([((lang === 'ar') ? key[0].ar_name : key[0].en_name), Number(all)]);
}
return dataTable;
}
async getClassificationById(id: string) {
let query: any = await this.assetRepository.query(`Select * from classifications_assets WHERE id=${id}`);
return query;
}
async getCountClassification(id: string) {
let query: any = await this.assetRepository.query(`SELECT COUNT(classificationId) FROM assets WHERE classificationId = ${id};`);
let f = query[0];
return f['COUNT(classificationId)'];
}
//---------------------------------------------------------------------------------
الكنترولر:
@Get('statuses-without-duplicate')
getStatusWithoutDuplicate() {
return this.assetsService.getStatusWithoutDuplicate();
}
@Get('vendors-without-duplicate')
getVendorsWithoutDuplicate() {
return this.assetsService.getVendorsWithoutDuplicate();
}
@Get('classifications-without-duplicate/:lang')
getClassificationsWithoutDuplicate(@Param('lang') lang: string) {
return this.assetsService.getClassificationsWithoutDuplicate(lang);
}
تعليقات
إرسال تعليق