Chart.js и данные визуализация

Для работы с графиками в приложениях на SvelteKit широко используется библиотека Chart.js. Она предоставляет гибкий и мощный API для визуализации данных через линейные, столбчатые, круговые диаграммы и другие типы графиков. В SvelteKit интеграция строится на компонентах и реактивности, что позволяет динамически обновлять графики при изменении данных.

Установка библиотеки осуществляется через npm:

npm install chart.js

Для работы в SvelteKit рекомендуется использовать onMount для инициализации графика, чтобы гарантировать, что DOM уже отрисован:

<script lang="ts">
  import { onMount } from 'svelte';
  import { Chart, registerables } from 'chart.js';
  Chart.register(...registerables);

  let chartCanvas: HTMLCanvasElement;
  let chart: Chart;

  const data = {
    labels: ['Январь', 'Февраль', 'Март', 'Апрель'],
    datasets: [{
      label: 'Продажи',
      data: [150, 200, 180, 220],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  };

  const config = {
    type: 'bar',
    data,
    options: {
      responsive: true,
      plugins: {
        legend: { position: 'top' },
        title: { display: true, text: 'Месячные продажи' }
      }
    }
  };

  onMount(() => {
    chart = new Chart(chartCanvas, config);
  });
</script>

<canvas bind:this={chartCanvas}></canvas>

Реактивное обновление данных

Одним из сильных преимуществ SvelteKit является реактивность. Для динамического обновления графиков данные можно связывать с реактивными переменными:

<script lang="ts">
  import { onMount } from 'svelte';
  import { Chart, registerables } from 'chart.js';
  Chart.register(...registerables);

  let chartCanvas: HTMLCanvasElement;
  let chart: Chart;

  let salesData = [150, 200, 180, 220];

  const data = {
    labels: ['Январь', 'Февраль', 'Март', 'Апрель'],
    datasets: [{
      label: 'Продажи',
      data: salesData,
      backgroundColor: 'rgba(153, 102, 255, 0.2)',
      borderColor: 'rgba(153, 102, 255, 1)',
      borderWidth: 1
    }]
  };

  const config = { type: 'bar', data, options: { responsive: true } };

  onMount(() => { chart = new Chart(chartCanvas, config); });

  $: if (chart) {
    chart.data.datasets[0].data = salesData;
    chart.update();
  }
</script>

<canvas bind:this={chartCanvas}></canvas>

При изменении массива salesData график автоматически перерисовывается благодаря реактивному блоку $:.

Разные типы диаграмм и их настройки

Chart.js поддерживает множество типов диаграмм, каждый из которых можно кастомизировать через options и plugins.

  • Линейная диаграмма (Line): подходит для отображения трендов. Опции включают кривизну линий (tension), цвет линий, точки данных и их размеры.
  • Столбчатая диаграмма (Bar): удобна для сравнения категорий. Можно задавать горизонтальные и вертикальные оси, настраивать ширину столбцов.
  • Круговая диаграмма (Pie/Doughnut): отображает доли в процентах, поддерживает анимацию появления и всплывающие подсказки (tooltip).
  • Радарная диаграмма (Radar): сравнивает несколько категорий для разных объектов.
  • Гистограмма с накоплением (Stacked Bar): используется для визуализации сумм по категориям.

Пример линейного графика с кривыми:

const data = {
  labels: ['Неделя 1', 'Неделя 2', 'Неделя 3', 'Неделя 4'],
  datasets: [{
    label: 'Посещаемость',
    data: [50, 75, 60, 90],
    borderColor: 'rgba(255, 99, 132, 1)',
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    tension: 0.4
  }]
};

const config = { type: 'line', data, options: { responsive: true } };

Работа с плагинами и интерактивностью

Chart.js предоставляет плагины для расширения функционала: подсказки, легенды, анимация, zoom/pan. Для SvelteKit можно использовать их через конфигурацию plugins:

import zoomPlugin from 'chartjs-plugin-zoom';

Chart.register(zoomPlugin);

const config = {
  type: 'line',
  data,
  options: {
    plugins: {
      zoom: {
        zoom: { wheel: { enabled: true }, mode: 'x' },
        pan: { enabled: true, mode: 'x' }
      }
    }
  }
};

Оптимизация производительности

При работе с большими массивами данных важно учитывать производительность:

  • Использовать chart.update('none') для пакетного обновления без анимации.
  • Ограничивать количество точек на графике.
  • Разбивать данные на страницы или сегменты для динамической подгрузки.
  • Использовать реактивные переменные SvelteKit для минимизации лишних перерисовок.

Комбинированные графики

Chart.js поддерживает смешанные типы графиков, что позволяет объединять линейные и столбчатые диаграммы в одном компоненте:

const config = {
  type: 'bar',
  data: {
    labels: ['Январь', 'Февраль', 'Март'],
    datasets: [
      { type: 'line', label: 'Средний доход', data: [200, 250, 300], borderColor: 'blue' },
      { type: 'bar', label: 'Продажи', data: [150, 200, 180], backgroundColor: 'green' }
    ]
  },
  options: { responsive: true }
};

Такой подход помогает визуализировать зависимости и сравнения между разными наборами данных в одной диаграмме.

Интеграция с fetch и динамическими данными

Для получения данных с сервера или API используется load функция SvelteKit:

<script lang="ts">
  import { onMount } from 'svelte';
  import { Chart, registerables } from 'chart.js';
  Chart.register(...registerables);

  let chartCanvas: HTMLCanvasElement;
  let chart: Chart;
  let apiData = [];

  onMount(async () => {
    const res = await fetch('/api/sales');
    apiData = await res.json();

    const data = {
      labels: apiData.map(d => d.month),
      datasets: [{ label: 'Продажи', data: apiData.map(d => d.value) }]
    };

    chart = new Chart(chartCanvas, { type: 'bar', data, options: { responsive: true } });
  });
</script>

<canvas bind:this={chartCanvas}></canvas>

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

Настройка внешнего вида

Chart.js поддерживает полное управление стилем графиков:

  • Цвета фона и границ.
  • Шрифты и размеры легенды, заголовков и подписей осей.
  • Толщина линий, размеры точек и радиусы дуг.
  • Анимации появления, плавности кривых и эффекты hover.
const options = {
  responsive: true,
  plugins: {
    legend: { labels: { font: { size: 14 }, color: '#333' } },
    title: { display: true, text: 'Продажи', font: { size: 18 } }
  },
  scales: {
    y: { beginAtZero: true, ticks: { color: '#555', font: { size: 12 } } },
    x: { ticks: { color: '#555', font: { size: 12 } } }
  }
};

Эта гибкость позволяет создавать корпоративные дашборды и аналитические панели с единым визуальным стилем, полностью управляемым через конфигурацию Chart.js в SvelteKit.

Оглавление