Grafik keuangan untuk aplikasi Anda

Menemukan grafik yang tepat membutuhkan waktu dan banyak pertanyaan. Hari ini saya ingin berbagi pengalaman saya dalam memilih grafik keuangan untuk menghemat waktu dan tenaga Anda.

Dalam artikel ini saya akan mempertimbangkan tiga perpustakaan utama untuk saya, membuat perbandingan dan menambahkan komentar dari pengalaman pribadi.

Halo, Habr!

. 3 , . . open source lightweight-charts, trading-vue-js ( Vuejs) harting_library.

: " TradingView"

English version.

. , "" "". .

lightweight-charts

. , . , . , - , .

, TradingView - .

"" : line, area, , . . , . CDN Nodejs.

:

$ npm install lightweight-charts

import { createChart } from 'lightweight-charts';

const chart = createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries();
lineSeries.setData([
    { time: '2019-04-11', value: 80.01 },
    { time: '2019-04-12', value: 96.63 },
    { time: '2019-04-13', value: 76.64 },
    { time: '2019-04-14', value: 81.89 },
]);

: https://ru.tradingview.com/lightweight-charts/

: https://github.com/tradingview/lightweight-charts/blob/master/docs/README.md

: Apache License, Version 2.0

: 3.1.5

: https://discord.com/invite/E6UthXZ

harting_library

TradingView, . TV. , "" .

. :

1. ( )
3. GitHub

, .

API, . , — .

harting_library . "-" .

: https://charting-library.tradingview.com/

: https://github.com/tradingview/charting_library/wiki ( 404 )

: https://discord.com/invite/E6UthXZ

TradingVue

, . TradingView, (MIT), API. , . 20ms 1000 . — JavaScript, . Vuejs, , , .

:

— . — . TradingView.com — !

. overlays. tvjs-overlays.

, , . Pull .

:

npm i trading-vue-js

<template>
<trading-vue :data="this.$data"></trading-vue>
</template>

<script>

import TradingVue from 'trading-vue-js'

export default {
    name: 'app',
    components: { TradingVue },
    data() {
        return {
            ohlcv: [
                [ 1551128400000, 33,  37.1, 14,  14,  196 ], // [timestamp, open, high, low, close, volume],
                [ 1551132000000, 13.7, 30, 6.6,  30,  206 ],
                [ 1551135600000, 29.9, 33, 21.3, 21.8, 74 ],
                [ 1551139200000, 21.7, 25.9, 18, 24,  140 ],
                [ 1551142800000, 24.1, 24.1, 24, 24.1, 29 ],
            ]
        }
    }
}

</script>

playground



: MIT

" " charting_library TradingVue , .

, :)

Kelanjutan dari artikel: " Menghubungkan dan Menyiapkan Grafik TradingView "

Terima kasih atas perhatian Anda!