Линейные диаграммы — это мощные инструменты визуализации, которые позволяют отображать тенденции и закономерности данных с течением времени. ApexCharts — это популярная библиотека диаграмм JavaScript, которая обеспечивает простой и эффективный способ создания интерактивных и визуально привлекательных линейных диаграмм. В этой статье мы рассмотрим различные методы создания линейных диаграмм с помощью ApexCharts, а также приведем примеры кода для демонстрации каждого подхода.

Метод 1: базовая линейная диаграмма
Самый простой способ создать линейную диаграмму с помощью ApexCharts — предоставить массив точек данных, представляющих значения по осям X и Y. Вот пример:

var options = {
  chart: {
    type: 'line',
  },
  series: [{
    name: 'Sales',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
  }
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

Метод 2: линейная диаграмма из нескольких рядов
Вы также можете построить несколько рядов на одной линейной диаграмме для сравнения различных наборов данных. Вот пример:

var options = {
  chart: {
    type: 'line',
  },
  series: [{
    name: 'Sales',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  },
  {
    name: 'Expenses',
    data: [20, 25, 30, 35, 40, 45, 50, 55, 60]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
  }
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

Метод 3: линейная диаграмма с накоплением
Линейная диаграмма с накоплением полезна, когда вы хотите представить совокупный вклад различных рядов. Вот пример:

var options = {
  chart: {
    type: 'line',
  },
  series: [{
    name: 'Series A',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  },
  {
    name: 'Series B',
    data: [20, 25, 30, 35, 40, 45, 50, 55, 60]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
  },
  stroke: {
    width: [2, 2]
  },
  fill: {
    opacity: [0.25, 0.25]
  },
  legend: {
    position: 'top'
  }
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

Метод 4: диаграмма с плавными линиями
Если вы предпочитаете диаграмму с плавными линиями вместо прямых линий, вы можете включить опцию smooth. Вот пример:

var options = {
  chart: {
    type: 'line',
  },
  series: [{
    name: 'Sales',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
  },
  stroke: {
    curve: 'smooth'
  }
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

ApexCharts предоставляет универсальный набор функций для создания потрясающих линейных диаграмм. В этой статье мы рассмотрели различные методы, в том числе базовые линейные диаграммы, линейные диаграммы с несколькими рядами, линейные диаграммы с накоплением и гладкие линейные диаграммы. Используя возможности ApexCharts и настраивая параметры, вы можете создавать визуально привлекательные линейные диаграммы, которые эффективно отражают тенденции ваших данных.