Angular Highcharts-분산 형 차트

다음은 기본 분산 형 차트의 예입니다.

Highcharts 구성 구문 장 에서 차트를 그리는 데 사용 된 구성을 이미 살펴 보았습니다 .

기본 분산 형 차트의 예는 다음과 같습니다.

구성

이제 추가 구성 / 단계를 살펴 보겠습니다.

시리즈

분산 형이되도록 차트 유형을 구성합니다. series.type차트의 계열 유형을 결정합니다. 여기에서 기본값은 "line"입니다.

var chart = {
   type: 'scatter',
   zoomType: 'xy'
};

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {         
      title : {
         text: 'Scatter plot'   
      },      
      series : [{
         type: 'scatter',
         zoomType:'xy',
         name: 'Browser share',
         data: [ 1, 1.5, 2.8, 3.5, 3.9, 4.2 ]
      }]
   };
}

결과

결과를 확인하십시오.