Chart.js diagrama de dispersión

Un diagrama de dispersión está formado por múltiples puntos de coordenadas a partir de dos conjuntos de datos. Examina la distribución de los puntos de coordenadas para determinar si existe alguna relación entre las dos variables o para resumir el patrón de distribución de los puntos.

Estructura de datos:

data: [{
        x: 10,
        y: 20
    }, {
        x: 15,
        y: 10
    }]

Diagrama de dispersióntypeLos atributos sonscatter。

const config = {
  type: 'scatter',
  data: data,
  options: {
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      }
    }
  }
};

A continuación, creamos un diagrama de dispersión simple:

Ejemplo

const ctx = document.getElementById('myChart');
const data = {
  datasets: [{
    label: 'Ejemplo de diagrama de dispersión',
    data: [{
      x: -10,
      y: 0
    }, {
      x: 0,
      y: 10
    }, {
      x: 10,
      y: 5
    }, {
      x: 0.5,
      y: 5.5
    }],
    backgroundColor: 'rgb(255, 99, 132)'
  }],
};
const config = {
  type: 'scatter',
  data: data,
  options: {
    responsive: true, // Configurar el gráfico como responsivo, que cambie según el tamaño de la ventana
    maintainAspectRatio: false,// Mantener la proporción original del gráfico
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      }
    }
  }
};
const myChart = new Chart(ctx, config);

Pruébalo »

El resultado del ejemplo anterior es:

Otras extensiones