Точечная диаграмма Chart.js

Диаграмма рассеяния состоит из множества координатных точек, образованных двумя наборами данных. Изучая распределение координатных точек, она определяет, существует ли некоторая корреляция между двумя переменными, или обобщает закономерность распределения координатных точек.

Структура данных:

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

Диаграмма рассеянияtypeАтрибут —scatter。

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

Теперь давайте создадим простую диаграмму рассеяния:

Пример

const ctx = document.getElementById('myChart');
const data = {
  datasets: [{
    label: 'Пример диаграммы рассеяния',
    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, // Сделать диаграмму адаптивной, изменяющейся в зависимости от окна экрана
    maintainAspectRatio: false,// Сохранять исходное соотношение сторон диаграммы
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      }
    }
  }
};
const myChart = new Chart(ctx, config);

Попробуйте »

Результат вывода приведённого выше примера:

Другие расширения