कोणीय संस्करण 14 के रिलीज के साथ, स्टैंडअलोन घटकों को पेश किया गया है, और NgModule वैकल्पिक हो गया है; कोडबेस के निर्माण और संरचना का एक नया तरीका सुगम बनाना।

इस लेख में, हम एक चार्ट बनाएंगे और देखेंगे कि आधिकारिक हाईचार्ट्स कोणीय आवरण के साथ-साथ कोणीय स्टैंडअलोन घटकों का उपयोग और एकीकरण कैसे करें ।

आइए शुरू करें

एंगुलर के नवीनतम संस्करण के साथ एक प्रोजेक्ट बनाने के लिए, शुरुआत के लिए निम्नलिखित कमांड के साथ एंगुलर-क्ली पैकेज को अपडेट करें:
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

इस परियोजना के लिए, हम उपयोग कर रहे हैं:

• कोणीय 14.
• हाईचार्ट्स V10.1.0।
• हाईचार्ट्स-कोणीय ।

• नोड: 14.17.0
• एनपीएम 8.3.1
• कोणीय सीएलआई: 14.0.2।

1. यदि आप इस प्रकार के वातावरण से अपरिचित हैं, तो आधिकारिक एंगुलर दस्तावेज़ वर्णन करता है कि स्थानीय पर्यावरण कार्यक्षेत्र कैसे सेट किया जाए, और स्टैंडअलोन घटक के बारे में और अधिक ।

2. स्थापित करने highcharts-angularके लिए और हाईचार्ट्स पुस्तकालय निम्नलिखित निर्देश चलाएँ npm install highcharts-angular --save:।

3. पैकेज आयात करने के लिए फाइल पर जाएं और पैकेज से app.module.tsमॉड्यूल आयात करें ।HighchartsChartModulehighcharts-angular

4. हाईचार्ट्स चार्ट बनाने के लिए, हाईचार्ट्स स्थापित करें: npm install highcharts --save.

5. हम app.compoent.tsएक स्टैंडअलोन घटक के रूप में घोषित कर रहे हैं और HighchartsChartModuleNgModule (वैकल्पिक) के बजाय आंतरिक आयात सरणी आयात कर रहे हैं। अनुप्रयोग स्तर की निर्भरता जैसे मार्ग, निर्भरता इंजेक्शन main.ts और घटक स्तर में app.component.tsया किसी अन्य घटक में कॉन्फ़िगर किया गया है।

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [HighchartsChartModule],
})

import './polyfills';
import {
  bootstrapApplication
} from '@angular/platform-browser';
import {
  AppComponent
} from './app/app.component';

bootstrapApplication(AppComponent);

नीचे टिप्पणी में अपने विचार और प्रश्न साझा करने के लिए स्वतंत्र महसूस करें।

हमारा ब्लॉग देखें और हाईचार्ट्स का उपयोग करने के सर्वोत्तम सुझावों के बारे में अधिक जानें।

लेखकः हारून अंसारी

हारून अंसारी कंप्यूटर साइंस इंजीनियर हैं। उन्हें जावास्क्रिप्ट, एंगुलर और .NET में कई वर्षों का अनुभव है। वह डेटा विज़ुअलाइज़ेशन से प्यार करता है और ओपन सोर्स प्रोजेक्ट्स में योगदान देता है। ट्विटर @haroonansari1 और LinkedIn पर हारून को फॉलो करें