Chart.js is a popular JavaScript chart library, and ng2 chart is a wrapper of Angular 2+, which can easily integrate Chart.js into Angular. Let's look at the basic usage.

install

First, install Chart.js and ng2-charts in the project:

# Yarn:
$ yarn add ng2-charts chart.js

# or npm 
$ npm install ng2-charts charts.js --save

Of course, if you're building a project using Angular CLI, you can easily add Chart.js to the. angular-cli.json configuration file to bind it to the application at all times:

//: .angular-cli.json (partial)
"script": [
  "../node_modules/chart.js/dist/Chart.min.js"
]

Now you need to import ng2-charts ChartsModule into your app module or function module:

//: app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartsModule } from '@angular/charts';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule,
    ChartsModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Use

ng2-charts gives us a baseChart instruction that can be applied to HTML canvas elements. The following is an example showing some options for input and the chartClick event for output of the instruction:

//: app.component.html

<div style="width: 40%;">
  <canvas
      baseChart
      [chartType]="'line'"
      [datasets]="chartData"
      [labels]="chartLabels"
      [options]="chartOptions"
      [legend]="true"
      (chartClick)="onChartClick($event)">
  </canvas>
</div>

This is what component classes look like now:

//: app.component.ts

import { Component } from '@angular/core';

@Component({ ... })
export class AppComponent {
  chartOptions = {
    responsive: true
  };

  chartData = [
    { data: [330, 600, 260, 700], label: 'Account A' },
    { data: [120, 455, 100, 340], label: 'Account B' },
    { data: [45, 67, 800, 500], label: 'Account C' }
  ];

  chartLabels = ['January', 'February', 'Mars', 'April'];

  onChartClick(event) {
    console.log(event);
  }
}

option

The following are different optional inputs:

chartType

Set the basic type of chart, and the values can be pipe, doughnut, bar, line, polar area, radar or horizontalBar.

legend

A Boolean value for displaying legends above a chart.

datasets

An array of objects containing data arrays and labels for each data set.

data

If your chart is simple and has only one data set, you can use data instead of datasets.

labels

Set of labels on the x-axis

options

Objects that contain chart options. For more information on available options, see the official Chart.js documentation.

In the example above, we set the chart in adaptive mode and adjust it automatically according to the size of the viewport.

colors

Not shown in the above example, but you can define your own color and pass in an array of object text containing the following values:

myColors = [
  {
    backgroundColor: 'rgba(103, 58, 183, .1)',
    borderColor: 'rgb(103, 58, 183)',
    pointBackgroundColor: 'rgb(103, 58, 183)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(103, 58, 183, .8)'
  },
  // ...colors for additional data sets
];

When using custom colors, you must provide a literal quantity of color objects for each data set.

Event

Send out two events, chartClick and chartHover, which allow you to react to users interacting with charts. The current active point and label are returned as part of the launch event data.

Dynamic Update Data Set

Of course, the advantage of Chart.js is that your chart can easily update/respond data entered from the back end or user dynamically.

In the following example, we added a new data set for May:

//: app.component.ts(partial)

newDataPoint(dataArr = [100, 100, 100], label) {

  this.chartData.forEach((dataset, index) => {
    this.chartData[index] = Object.assign({}, this.chartData[index], {
      data: [...this.chartData[index].data, dataArr[index]]
    });
  });

  this.chartLabels = [...this.chartLabels, label];

}

It can be used like this:

//: app.component.html(partial)

<button (click)="newDataPoint([900, 50, 300], 'May')">
  Add data point
</button>

You may notice that instead of altering the data set of the chart, we use new data to return new objects containing previous data. Object.assign can do this easily.

In this particular example, if no parameters are provided, we set the default value of 100 for three data sets.

God's favored one

Thursday, August 17, 2017, Shenzhen