📊 Как сделать графики с Chart.js: полное руководство для трейдеров

Вступление: почему Chart.js — лучший выбор для трейдерских виджетов

Вы когда-нибудь хотели добавить на свой сайт или в приложение красивый, интерактивный график котировок? Или визуализировать результаты бэктестинга? Или просто показать динамику баланса за месяц? Chart.js — это мощная, лёгкая и бесплатная библиотека для создания графиков на JavaScript. Она идеально подходит для трейдерских проектов, потому что:

⚡ Лёгкая и быстрая — всего ~60 КБ, не тормозит страницу.
📱 Адаптивная — графики автоматически подстраиваются под размер экрана (десктоп, планшет, телефон).
🎨 Красивая и гибкая — 8 типов графиков, анимации, возможность добавления собственных плагинов.
📈 Простая в освоении — JavaScript + HTML = график за 5 минут.

В этом руководстве я покажу всё: от установки до создания свечного графика (OHLC) и обновления данных в реальном времени. В конце вы сможете создать полноценный трейдерский виджет, который обновляет цены каждые 5 секунд.

«Chart.js — это швейцарский нож визуализации данных. Не самый навороченный, но для 90% задач трейдера его более чем достаточно».

1. Установка и первый график

Способы установки:

🔗 CDN (самый простой для тестов): добавьте в HTML
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>.
📦 npm (для серьёзных проектов): npm install chart.js.
📥 Скачать файл с официального сайта.

Первый график: линейный (котировки BTC)


<!DOCTYPE html>
<html>
<head>
    <title>График BTC/USD</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
</head>
<body>
    <canvas id="btcChart" width="800" height="400"></canvas>
    
    <script>
        const ctx = document.getElementById('btcChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн'],
                datasets: [{
                    label: 'BTC/USD',
                    data: [42000, 44000, 46000, 45000, 48000, 51000],
                    borderColor: 'rgb(75, 192, 192)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `$${context.raw.toLocaleString()}`;
                            }
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

💡 Структура объекта Chart:

type — тип графика ('line', 'bar', 'candlestick' (через плагин), 'bubble' и т.д.).
data — метки (labels) и наборы данных (datasets).
options — настройки (респонсивность, тултипы, подписи осей).

2. Типы графиков для трейдера

2.1. Линейный график (Line Chart) — тренды

Идеален для отображения цены закрытия, баланса счёта, скользящих средних.

datasets: [{
    type: 'line',
    label: 'SMA 20',
    data: [44500, 45500, 46500, 47500, 48500],
    borderColor: 'red',
    borderWidth: 2,
    fill: false
}]

2.2. Свечной график (Candlestick Chart) — самый важный

Chart.js не имеет встроенного свечного графика, но есть официальный плагин chartjs-chart-financial. Установка:

npm install chart.js chartjs-chart-financial

Использование в HTML:

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-financial@0.2.0/dist/chartjs-chart-financial.min.js"></script>

Код свечного графика:

new Chart(ctx, {
    type: 'candlestick',
    data: {
        datasets: [{
            label: 'BTC/USD',
            data: [
                { t: '2025-06-01', o: 67000, h: 67500, l: 66800, c: 67200 },
                { t: '2025-06-02', o: 67200, h: 68000, l: 67000, c: 67800 },
                { t: '2025-06-03', o: 67800, h: 67900, l: 66500, c: 66600 }
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const ohlc = context.raw;
                        return `O: ${ohlc.o} | H: ${ohlc.h} | L: ${ohlc.l} | C: ${ohlc.c}`;
                    }
                }
            }
        }
    }
});

2.3. Гистограмма (Bar Chart) — объёмы


type: 'bar',
data: {
    labels: ['01.06', '02.06', '03.06'],
    datasets: [{
        label: 'Объём (BTC)',
        data: [12500, 15800, 9800],
        backgroundColor: 'rgba(54, 162, 235, 0.5)'
    }]
}

📊 Свечной график — ключ к анализу: Свечи дают больше информации, чем просто линия. Плагин chartjs-chart-financial обязателен для профессионального трейдерского виджета.

3. Обновление данных в реальном времени (WebSocket + Chart.js)

Самый ценный навык — создание графика, который обновляется «на лету» с биржи. Используем WebSocket Binance и динамическое добавление данных.


// Подключение к WebSocket Binance
const ws = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt@trade');

const ctx = document.getElementById('liveChart').getContext('2d');
const chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [],
        datasets: [{
            label: 'BTC/USDT',
            data: [],
            borderColor: 'green',
            fill: false
        }]
    },
    options: {
        responsive: true,
        animation: false  // отключаем анимацию для скорости
    }
});

ws.onmessage = (event) => {
    const trade = JSON.parse(event.data);
    const price = parseFloat(trade.p);
    const time = new Date(trade.T).toLocaleTimeString();
    
    // Добавляем новую точку
    chart.data.labels.push(time);
    chart.data.datasets[0].data.push(price);
    
    // Ограничиваем количество точек (последние 50)
    if (chart.data.labels.length > 50) {
        chart.data.labels.shift();
        chart.data.datasets[0].data.shift();
    }
    
    chart.update();  // перерисовка
};

⚠️ Важное замечание: При частых обновлениях (несколько тиков в секунду) нужно ограничивать частоту перерисовки, иначе браузер может зависнуть. Используйте requestAnimationFrame или библиотеки для тротлинга.

4. Настройка внешнего вида для трейдерских графиков

4.1. Стили осей и сетки


options: {
    scales: {
        x: {
            title: { display: true, text: 'Время' },
            grid: { color: 'rgba(0,0,0,0.05)' }
        },
        y: {
            title: { display: true, text: 'Цена (USD)' },
            grid: { color: 'rgba(0,0,0,0.1)' },
            ticks: {
                callback: function(value) {
                    return '$' + value.toLocaleString();
                }
            }
        }
    }
}

4.2. Добавление нескольких наборов данных (цена + индикатор)


datasets: [
    {
        label: 'Цена закрытия',
        data: priceData,
        borderColor: 'blue',
        borderWidth: 2,
        fill: false
    },
    {
        label: 'SMA 20',
        data: smaData,
        borderColor: 'red',
        borderWidth: 1.5,
        borderDash: [5, 5],
        fill: false
    }
]

4.3. Заливка области между ценой и SMA

{
    label: 'Цена',
    data: priceData,
    backgroundColor: 'rgba(0,255,0,0.1)',
    fill: true
}

5. Продвинутые техники

5.1. Смешанные типы графиков (свечи + линия)

Можно комбинировать свечи и, например, скользящую среднюю. Для этого используется массив datasets с разными типами:


datasets: [
    {
        type: 'candlestick',
        label: 'BTC/USD',
        data: ohlcData
    },
    {
        type: 'line',
        label: 'SMA 20',
        data: smaData,
        borderColor: 'orange',
        borderWidth: 2,
        fill: false
    }
]

5.2. Зум и панорамирование

Chart.js не имеет встроенного зума, но есть плагин chartjs-plugin-zoom.


<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>

options: {
    plugins: {
        zoom: {
            pan: { enabled: true, mode: 'xy' },
            zoom: { wheel: { enabled: true }, mode: 'xy' }
        }
    }
}

5.3. Экспорт в PNG


const link = document.createElement('a');
link.download = 'chart.png';
link.href = chart.toBase64Image();
link.click();

6. Полный пример: виджет котировок BTC/USD со свечами, SMA и обновлением

Соберём всё вместе: загрузка исторических данных, свечной график, индикатор SMA 20 и обновление в реальном времени (имитация).

<!DOCTYPE html>
<html>
<head>
    <title>Трейдерский виджет</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-financial@0.2.0/dist/chartjs-chart-financial.min.js"></script>
</head>
<body>
    <canvas id="tradingWidget" width="1000" height="500"></canvas>
    
    <script>
        // Генерация тестовых OHLC данных (в реальном проекте — с биржи)
        function generateOHLC() {
            const data = [];
            let price = 67000;
            for (let i = 0; i < 100; i++) {
                const open = price;
                const close = price + (Math.random() - 0.5) * 500;
                const high = Math.max(open, close) + Math.random() * 200;
                const low = Math.min(open, close) - Math.random() * 200;
                data.push({ t: `2025-06-${Math.floor(i/3)+1}`, o: open, h: high, l: low, c: close });
                price = close;
            }
            return data;
        }
        
        const ohlcData = generateOHLC();
        
        // Расчёт SMA 20 (по ценам закрытия)
        const closes = ohlcData.map(d => d.c);
        const sma20 = [];
        for (let i = 0; i < closes.length; i++) {
            if (i < 19) {
                sma20.push(null);
            } else {
                const sum = closes.slice(i-19, i+1).reduce((a,b) => a + b, 0);
                sma20.push(sum / 20);
            }
        }
        
        const ctx = document.getElementById('tradingWidget').getContext('2d');
        new Chart(ctx, {
            type: 'candlestick',
            data: {
                datasets: [
                    {
                        label: 'BTC/USD',
                        data: ohlcData,
                        borderColor: 'rgba(0,0,0,0.3)',
                        barPercentage: 0.8
                    },
                    {
                        type: 'line',
                        label: 'SMA 20',
                        data: sma20,
                        borderColor: 'orange',
                        borderWidth: 2,
                        fill: false,
                        pointRadius: 0
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: (context) => {
                                if (context.dataset.label === 'BTC/USD') {
                                    const o = context.raw;
                                    return `O: ${o.o} | H: ${o.h} | L: ${o.l} | C: ${o.c}`;
                                }
                                return `SMA 20: ${context.raw}`;
                            }
                        }
                    }
                },
                scales: {
                    x: { title: { display: true, text: 'Дата' } },
                    y: { title: { display: true, text: 'Цена (USD)' } }
                }
            }
        });
    </script>
</body>
</html>

7. Сравнение Chart.js с альтернативами

Библиотека	Плюсы	Минусы
Chart.js	Лёгкая, бесплатная, простая, адаптивная, свечной график через плагин	Нет встроенных свечей, ограниченная кастомизация для сложных финансовых графиков
TradingView Lightweight Charts	Сверхбыстрая, профессиональный финансовый график, зум, технические индикаторы	Сложнее в настройке, только для финансовых данных
Highcharts	Очень мощная, множество типов графиков, коммерческая поддержка	Платная (для коммерческих проектов)

Заключение: с Chart.js ваш трейдерский сайт заиграет новыми красками

Chart.js — это идеальный инструмент для быстрого прототипирования трейдерских виджетов и дашбордов. Он не требует сложной настройки, легковесен и красиво выглядит. Да, для профессионального торгового терминала с миллионами точек данных лучше использовать TradingView Lightweight Charts. Но для 90% задач — отображения баланса, динамики портфеля, простых котировок — Chart.js более чем достаточен.

Начните с малого: создайте простой линейный график цены. Потом добавьте свечной (подключите плагин). Потом — индикатор SMA. А потом подключите реальные котировки через WebSocket. За один вечер вы сможете сделать виджет, который будет выглядеть как настоящий трейдерский терминал.

И помните: красивая визуализация — это половина успеха трейдерского сервиса. Клиенты доверяют тому, что видят. А с Chart.js ваши графики будут выглядеть профессионально даже на простой HTML-странице.

«Chart.js — это как краски. Холст есть, кисти есть. А что нарисовать — решает художник. В нашем случае — трейдер-разработчик».