Построение простой диаграммы рассеяния за 2 минуты ApexCharts

Выполняя множество численных исследований и кодируя в javascript, стало сложно использовать Numbers/Excel/Matlab для быстрой визуализации данных, сгенерированных кодом.

Немного покопавшись в сети, мы нашли отличный проект с открытым исходным кодом ApexCharts.

ApexCharts — это библиотека javascript, которую легко импортировать на вашу HTML-страницу.

Он имеет множество различных типов диаграмм, немного похожих на Excel, но лучше выглядящих.

Вот пример диаграммы Scatter, где ось x – это периметр прямоугольника, а ось y – площадь того же прямоугольника.

График можно легко настроить под новые данные и конфигурацию, отредактировав параметрыпеременную.

var options = {
          series: [{
          name: "Perimeter vs Area of rectangle",
          data: myData //is a [[1,3],[1,5]] for example
          }],
        chart: {
          height: 700,
          type: 'scatter', //here you define the type of chart
          zoom: {
            enabled: true,
            type: 'xy'
          }
        },
        xaxis: {
          tickAmount: 10, //the resolution of the ticks
          labels: {
            formatter: function(val) {
              return parseFloat(val).toFixed(1)
            }
          }
        },
        yaxis: {
          tickAmount: 7
        },
        title: {
          text: 'Rectangle area and perimeter', //your title
          align: 'left'
        },
    };

Вот полная HTML-страница, вам нужно будет включить файл styles.css и саму библиотеку (которая доступна в предоставленном репозитории)

Вот демонстрация ванильного javascript на codeit:

Демонстрация показывает точечный график расчетной площади прямоугольника в зависимости от его периметра. (Если вам интересно, между ними нет алгебраической связи :-))



Запустите KostaMalsev/graphsimple с помощью Codeit
Демонстрационный график: показывает отношение прямоугольника периметра к его площади cde.run



Вот наш репозиторий на GitHub.