Highcharts angulares: gráfico de dispersión con línea de regresión

A continuación se muestra un ejemplo de un gráfico de dispersión con línea de regresión.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts .

A continuación se ofrece un ejemplo de gráfico de dispersión con línea de regresión.

Configuraciones

Veamos ahora las configuraciones / pasos adicionales realizados.

serie

Configure el tipo de gráfico para que se base en la dispersión. series.typedecide el tipo de serie del gráfico. Aquí, el valor predeterminado es "línea".

series : [{
   type: 'scatter'
}]

Ejemplo

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
         }
      }]
   };
}

Resultado

Verifique el resultado.