Angular 9 Chart.js with NG2-Charts Demo - English writing exercise
<h4 id="what-is-chartjs">What is Chart.js?</h4><p>Chart.js is a well-recognized JavaScript library, and It is used to represent the data using the HTML5 canvas. It allows us to build dynamic as well as static charts, and it comes with full animation support for the various charts. It takes data in the JSON form, so it is merely simple to use it with any programming language.</p>
<h3 id="table-of-contents">Table of contents</h3>
<ol>
<li>Set up Angular Project</li>
<li>Configure Chart.js and ng2-charts Library in Angular 9</li>
<li>Line Chart</li>
<li>Bar Chart</li>
<li>Doughnut Chart</li>
<li>Radar Chart</li>
<li>Pie Chart</li>
<li>Bubble Chart</li>
</ol>
<h2 id="setup">Set up Angular Project</h2>
Install and setup Angular project by running the following command.
<pre><code class="language-bash">ng new angular-charts-app
# Would you like to add Angular routing?
# Select y and Hit Enter.
# Which stylesheet format would you like to use? (Use arrow keys)
# Choose CSS and hit Enter
</code></pre>
<p>Next, navigate to the project folder.</p>
<pre><code class="language-bash">cd angular-charts-app
</code></pre>
<p>Create components to show charts example in Angular.</p>
<pre><code class="language-bash">ng g c bar-chart
ng g c bubble-chart
ng g c line-chart
ng g c pie-chart
ng g c radar-chart
ng g c doughnut-chart
</code></pre>
<p>Install Bootstrap to manage the layout of Angular 8 chart app, however you can skip this step if you don’t want to use Bootstrap.</p>
<pre><code class="language-bash">yarn add -D bootstrap
</code></pre>
<p>Import the <strong>bootstrap.min.css</strong> file into the <code>angular.json</code> file.</p>
<pre><code class="language-json">"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
</code></pre>
<h2 id="configure">Configure Chart.js and ng2-charts Library in Angular 9</h2>
<p>Install <code>ng2-charts</code> and <code>Chart.js</code> libraries via <code>yarn</code> in Angular 9 project. We'll use <strong>ng2-charts</strong> along with <strong>Chart.js</strong> library in our Angular application to show the various charts.</p>
<pre><code class="language-bash">yarn add ng2-charts chart.js
</code></pre>
<p>The given command will install both the packages and save the entries inside the <code>package.json</code> file.</p>
<p>Next, import <code>ChartsModule</code> in <strong>app.module.ts</strong> file.</p>
<pre><code class="language-javascript">import { ChartsModule } from 'ng2-charts';
@NgModule({
declarations: [...],
imports: [
ChartsModule
],
providers: [...],
bootstrap: [...]
})
export class AppModule { }
</code></pre>
<h2 id="line_chart">Line Chart</h2>
A line chart is a basic chart, and it is also known as the line plot, line curve, and line graph chart. It represents the data in a sequence of information with the small associated points called markers.
<p>Let’s represent the crude oil prices for 6 months via line chart in our Angular app using <code>ng2-charts</code>.</p>
<p>Go to <strong>line-chart.component.ts</strong> file and add the following code in it.</p>
<pre><code class="language-javascript">import { Component } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';
@Component({
selector: 'app-line-chart',
templateUrl: './line-chart.component.html',
styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent {
lineChartData: ChartDataSets[] = [
{ data: , label: 'Crude oil prices' },
];
lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];
lineChartOptions = {
responsive: true,
};
lineChartColors: Color[] = [
{
borderColor: 'black',
backgroundColor: 'rgba(255,255,0,0.28)',
},
];
lineChartLegend = true;
lineChartPlugins = [];
lineChartType = 'line';
}
</code></pre>
<p>Go to <strong>line-chart.component.html</strong> file and include the following code in it.</p>
<pre><code class="language-html"><div class="chart-wrapper">
<canvas baseChart
="lineChartData"
="lineChartLabels"
="lineChartOptions"
="lineChartColors"
="lineChartLegend"
="lineChartType"
="lineChartPlugins">
</canvas>
</div>
</code></pre>
<p>Result:</p>
<p><img src="https://img2020.cnblogs.com/blog/426865/202005/426865-20200531181310351-96151558.png" alt="" loading="lazy"></p>
<h2 id="bar_chart">Bar Chart</h2>
A bar chart is a well-know chart that helps in representing the information categorically with rectangular bars. Data can be shown vertically or horizontally, and the displayed values are proportionate to the heights or length of the values defined. Let us display the best fruit data using vertical bar chart in Angular 8.
<p>Go to <strong>bar-chart.component.ts</strong> file and add the given below code.</p>
<pre><code class="language-javascript">import { Component } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';
@Component({
selector: 'app-bar-chart',
templateUrl: './bar-chart.component.html',
styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent {
barChartOptions: ChartOptions = {
responsive: true,
};
barChartLabels: Label[] = ['Apple', 'Banana', 'Kiwifruit', 'Blueberry', 'Orange', 'Grapes'];
barChartType: ChartType = 'bar';
barChartLegend = true;
barChartPlugins = [];
barChartData: ChartDataSets[] = [
{ data: , label: 'Best Fruits' }
];
}
</code></pre>
<p>Go to <strong>bar-chart.component.html</strong> file and add the given below code.</p>
<pre><code class="language-html"><div class="chart-wrapper">
<canvas
baseChart
="barChartData"
="barChartLabels"
="barChartOptions"
="barChartPlugins"
="barChartLegend"
="barChartType"
>
</canvas>
</div>
</code></pre>
<p>Result:<br>
<img src="https://img2020.cnblogs.com/blog/426865/202005/426865-20200531181341506-732593594.png" alt="" loading="lazy"></p>
<h2 id="doughnut_chart">Doughnut Chart</h2>
<p>Doughnut charts are used to prove a "part-to-whole" association, and In doughnut charts, all the section together express 100%. Doughnut charts serve the purpose of representing the data for a tiny number of categories (2-5).</p>
<p>Show the car sales data between three companies BMW, Ford and Tesla using Doughnut chart in Angular with <code>ng2-charts</code> module.</p>
<p>Go to <strong>doughnut-chart.component.ts</strong> file and add the given below code.</p>
<pre><code class="language-javascript">import { Component } from '@angular/core';
import { Label, MultiDataSet } from 'ng2-charts';
import { ChartType } from 'chart.js';
@Component({
selector: 'app-doughnut-chart',
templateUrl: './doughnut-chart.component.html',
styleUrls: ['./doughnut-chart.component.css']
})
export class DoughnutChartComponent {
doughnutChartLabels: Label[] = ['BMW', 'Ford', 'Tesla'];
doughnutChartData: MultiDataSet = [
];
doughnutChartType: ChartType = 'doughnut';
}
</code></pre>
<p>Go to <strong>doughnut-chart.component.html</strong> file and add the following code.</p>
<pre><code class="language-html"><div class="chart-wrapper">
<canvas
baseChart
="doughnutChartData"
="doughnutChartLabels"
="doughnutChartType"
>
</canvas>
</div>
</code></pre>
<p>Result:<br>
<img src="https://img2020.cnblogs.com/blog/426865/202005/426865-20200531181410872-864136372.png" alt="" loading="lazy"></p>
<h2 id="radar_chart">Radar Chart</h2>
<p>A radar chart is the best way to graphically displaying the multivariate information in the formation of a two-dimensional graph of three or more quantitative variables represented on axes beginning from the corresponding point</p>
<p>Let us analysis employees' skills using a radar chart in Angular.</p>
<p>Go to <strong>radar-chart.component.ts</strong> file and add the following code in it.</p>
<pre><code class="language-javascript">import { Component } from '@angular/core';
import { RadialChartOptions, ChartDataSets, ChartType } from 'chart.js';
import { Label } from 'ng2-charts';
@Component({
selector: 'app-radar-chart',
templateUrl: './radar-chart.component.html',
styleUrls: ['./radar-chart.component.css']
})
export class RadarChartComponent {
public radarChartOptions: RadialChartOptions = {
responsive: true,
};
public radarChartLabels: Label[] = ['Punctuality', 'Communication', 'Problem Solving',
'Team Player', 'Coding', 'Technical Knowledge', 'Meeting Deadlines'];
public radarChartData: ChartDataSets[] = [
{ data: , label: 'Employee Skill Analysis' }
];
public radarChartType: ChartType = 'radar';
}
</code></pre>
<p>Go to <strong>radar-chart.component.html</strong> file and add the given below code.</p>
<pre><code class="language-html"><div class="chart-wrapper">
<canvas
baseChart
="radarChartData"
="radarChartOptions"
="radarChartLabels"
="radarChartType"
>
</canvas>
</div>
</code></pre>
<p>Result:<br>
<img src="https://img2020.cnblogs.com/blog/426865/202005/426865-20200531181429000-482465457.png" alt="" loading="lazy"></p>
<h2 id="pie_chart">Pie Chart</h2>
<p>The name of the circle chart also recognizes a pie chart. It is a circular statistical graphic, which is separated into slices to demonstrate mathematical symmetries. In a pie chart, the arc length of per slice is proportionate to the amount it serves.</p>
<p>Now, let's try to represent favorite move data using pie chart in Angular.</p>
<p>Go to <strong>pie-chart.component.ts file</strong> and add the given below code.</p>
<pre><code class="language-javascript">import { Component } from '@angular/core';
import { ChartOptions, ChartType } from 'chart.js';
import { Label, SingleDataSet, monkeyPatchChartJsTooltip, monkeyPatchChartJsLegend } from 'ng2-charts';
@Component({
selector: 'app-pie-chart',
templateUrl: './pie-chart.component.html',
styleUrls: ['./pie-chart.component.css']
})
export class PieChartComponent {
public pieChartOptions: ChartOptions = {
responsive: true,
};
public pieChartLabels: Label[] = [['SciFi'], ['Drama'], 'Comedy'];
public pieChartData: SingleDataSet = ;
public pieChartType: ChartType = 'pie';
public pieChartLegend = true;
public pieChartPlugins = [];
constructor() {
monkeyPatchChartJsTooltip();
monkeyPatchChartJsLegend();
}
}
</code></pre>
<p>Go to <strong>pie-chart.component.html</strong> file and include the following code.</p>
<pre><code class="language-html"><div class="chart-wrapper">
<canvas
baseChart
="radarChartData"
="radarChartOptions"
="radarChartLabels"
="radarChartType"
>
</canvas>
</div>
</code></pre>
<p>Result:<br>
<img src="https://img2020.cnblogs.com/blog/426865/202005/426865-20200531181442723-1790490932.png" alt="" loading="lazy"></p>
<h2 id="bubble_chart">Bubble Chart</h2>
A bubble chart is best suitable to represent the data in 3 dimensions. Per entity with its triplet of correlated data is plotted as a disk that proves two of the vᵢ values through the disk’s xy location and the third through its size.
<p>Next, we will show investment equities via Bubble chart in Angular 9.</p>
<p>Go to <strong>bubble-chart.component.ts</strong> file and include the following code.</p>
<pre><code class="language-javascript">import { Component } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
@Component({
selector: 'app-bubble-chart',
templateUrl: './bubble-chart.component.html',
styleUrls: ['./bubble-chart.component.css']
})
export class BubbleChartComponent {
public bubbleChartOptions: ChartOptions = {
responsive: true,
scales: {
xAxes: [{
ticks: {
min: 0,
max: 50,
}
}],
yAxes: [{
ticks: {
min: 0,
max: 50,
}
}]
}
};
public bubbleChartType: ChartType = 'bubble';
public bubbleChartLegend = true;
public bubbleChartData: ChartDataSets[] = [
{
data: [
{ x: 15, y: 15, r: 15 },
{ x: 25, y: 15, r: 25 },
{ x: 36, y: 12, r: 33 },
{ x: 10, y: 18, r: 18 },
],
label: 'Investment Equities',
},
];
}
</code></pre>
<p>Go to <strong>bubble-chart.component.html</strong> file and include the following code.</p>
<pre><code class="language-html"><div class="chart-wrapper">
<canvas
baseChart
="bubbleChartData"
="bubbleChartOptions"
="bubbleChartLegend"
="bubbleChartType"
>
</canvas>
</div>
</code></pre>
<p>Verify the result in the browser, bubble chart will look like this.<br>
<img src="https://img2020.cnblogs.com/blog/426865/202005/426865-20200531181454868-1051759091.png" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/matt1985/p/13020358.html
頁:
[1]