Highcharts angolari - Grafico a dispersione con linea di regressione

Di seguito è riportato un esempio di un grafico a dispersione con linea di regressione.

Abbiamo già visto la configurazione utilizzata per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts .

Di seguito viene fornito un esempio di grafico a dispersione con linea di regressione.

Configurazioni

Vediamo ora le configurazioni / passaggi aggiuntivi effettuati.

serie

Configurare il tipo di grafico in modo che sia basato sulla dispersione. series.typedecide il tipo di serie per il grafico. Qui, il valore predefinito è "line".

series : [{
   type: 'scatter'
}]

Esempio

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 with regression line'   
      },
      xAxis : {
         min: -0.5,
         max: 5.5
      },
      yAxis : {
         min: 0
      },
      series : [
      {
         type: 'line',
         name: 'Regression Line',
         data: [[0, 1.11], [5, 4.51]],
         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
         }
      }]
   };
}

Risultato

Verifica il risultato.