Angular-highcharts-combinations-scatter

Angular Highcharts-回帰線を使用した散布図

以下は、回帰直線を使用した散布図の例です。

link：/angular_highcharts/angular_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。

回帰線を使用した散布図の例を以下に示します。

構成

ここで、追加の構成/実行された手順を見てみましょう。

シリーズ

散布図ベースのチャートタイプを構成します。 series.type は、チャートのシリーズタイプを決定します。 ここで、デフォルト値は「line」です。

series : [{
   type: 'scatter'
}]

例

*_app.component.ts_*

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {
      title : {
         text: 'Scatter plot with regression line'
      },
      xAxis : {
         min: -0.5,
         max: 5.5
      },
      yAxis : {
         min: 0
      },
      series : [
      {
         type: 'line',
         name: 'Regression Line',
         data: [[marker: {
            enabled: false
         },
         states: {
            hover: {
               lineWidth: 0
            }
         },
         enableMouseTracking: false
      },
      {
         type: 'scatter',
         name: 'Observations',
         data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
         marker: {
            radius: 4
         }
      }]
   };
}

結果

結果を確認します。

回帰線付き散布図