Разработка интерактивных графиков на Highcharts для сайта

Разработка интерактивных графиков на Highcharts для сайта

Highcharts — коммерческая библиотека (бесплатно для некоммерческих проектов) с богатой функциональностью: 40+ типов графиков, экспорт, Stock charts, Maps. Отличается стабильностью и обширной документацией.

Установка

npm install highcharts highcharts-react-official

Базовый Line Chart

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import { useRef } from 'react';

function SalesChart({ data }) {
  const chartRef = useRef<HighchartsReact.RefObject>(null);

  const options: Highcharts.Options = {
    chart: {
      type: 'areaspline',
      height: 300,
      animation: { duration: 500 }
    },
    title: { text: undefined },
    xAxis: {
      type: 'datetime',
      labels: {
        format: '{value:%d %b}'
      }
    },
    yAxis: {
      title: { text: null },
      labels: {
        formatter() {
          return `${(this.value as number / 1000).toFixed(0)}k ₽`;
        }
      }
    },
    tooltip: {
      shared: true,
      xDateFormat: '%d.%m.%Y',
      valuePrefix: '₽ ',
      valueDecimals: 0
    },
    plotOptions: {
      areaspline: {
        fillOpacity: 0.15,
        marker: { enabled: false }
      }
    },
    series: [
      {
        type: 'areaspline',
        name: 'Выручка',
        color: '#3b82f6',
        data: data.map(d => [new Date(d.date).getTime(), d.revenue])
      }
    ],
    credits: { enabled: false }
  };

  return <HighchartsReact highcharts={Highcharts} options={options} ref={chartRef} />;
}

Highcharts Stock (для финансовых данных)

import HighchartsStock from 'highcharts/modules/stock';
import HighchartsReact from 'highcharts-react-official';

HighchartsStock(Highcharts);

function StockChart({ ohlcData, volumeData }) {
  const options: Highcharts.Options = {
    rangeSelector: {
      selected: 1,
      buttons: [
        { type: 'day', count: 1, text: '1д' },
        { type: 'week', count: 1, text: '1н' },
        { type: 'month', count: 1, text: '1м' },
        { type: 'year', count: 1, text: '1г' },
        { type: 'all', text: 'Всё' }
      ]
    },
    yAxis: [
      {
        labels: { align: 'right', x: -3 },
        title: { text: 'OHLC' },
        height: '60%',
        lineWidth: 2
      },
      {
        labels: { align: 'right', x: -3 },
        title: { text: 'Объём' },
        top: '65%',
        height: '35%',
        lineWidth: 2
      }
    ],
    series: [
      {
        type: 'candlestick',
        name: 'Price',
        data: ohlcData,
        upColor: '#22c55e',
        color: '#ef4444'
      },
      {
        type: 'column',
        name: 'Volume',
        data: volumeData,
        yAxis: 1,
        color: '#93c5fd'
      }
    ]
  };

  return <HighchartsReact highcharts={Highcharts} constructorType="stockChart" options={options} />;
}

Drilldown

const options: Highcharts.Options = {
  chart: { type: 'column' },
  series: [{
    type: 'column',
    name: 'Категории',
    data: [
      { name: 'Электроника', y: 543000, drilldown: 'electronics' },
      { name: 'Одежда', y: 321000, drilldown: 'clothes' }
    ]
  }],
  drilldown: {
    series: [
      {
        id: 'electronics',
        data: [
          ['Смартфоны', 230000],
          ['Ноутбуки', 180000],
          ['Аксессуары', 133000]
        ]
      }
    ]
  }
};

Экспорт в PNG/PDF/SVG

// Встроенный модуль экспорта
import 'highcharts/modules/exporting';
import 'highcharts/modules/export-data';
import 'highcharts/modules/offline-exporting';

const options: Highcharts.Options = {
  exporting: {
    enabled: true,
    buttons: {
      contextButton: {
        menuItems: ['downloadPNG', 'downloadPDF', 'downloadSVG', 'downloadCSV']
      }
    }
  }
};

Сроки

3–5 типов графиков с drilldown и экспортом — 3–5 дней.