ΠΡΠ΅Π½Ρ Π»ΡΠ³ΠΊΠΈΠΉ (~7 kB gzip) ΠΏΠ»ΠΎΡΡΠ΅Ρ Π΄Π»Ρ JS
- 2 ΡΠΈΠΏΠ° Π³ΡΠ°ΡΠΈΠΊΠΎΠ²: Π»ΠΈΠ½ΠΈΠΈ ΠΈ timeline (Π½Π°ΡΠ°Π»ΠΎ ΠΈ ΠΊΠΎΠ½Π΅Ρ ΡΠ°Π±ΠΎΡΡ)
- ΠΡΠ°ΡΠΈΠΊ Π»ΠΈΠ½ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΠ°ΡΠΈΡΠ½ΡΠΌ (Π²ΡΠ΅ΠΌΡ ΡΠΎΡΠ΅ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ Π²ΡΡΡΠ½ΡΡ) ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ½ΡΠΌ (Π²ΡΠ΅ΠΌΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°)
- ΠΡΠ±ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΎΡΠ΅ΠΉ
- Π Π΅ΠΆΠΈΠΌ ΠΎΠ±ΡΠ΅Π³ΠΎ ΠΌΠ°ΡΡΡΠ°Π±Π° ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ³ΠΎ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡΠΈ
- ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠ΅ΠΉ
- ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌ
- Π’ΡΠΌΠ½Π°Ρ ΠΈ ΡΠ²Π΅ΡΠ»Π°Ρ ΡΠ΅ΠΌΡ
- Π‘ΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG
- Π Π΅ΠΆΠΈΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠ° ΠΈ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°
- ΠΠΎΠ»Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Ρ ΡΠ°ΡΡΠΊΡΠΈΠ½Π°
Browser: https://gyverlibs.github.io/SVPlot.js/SVPlot.min.js
Node:
npm i @alexgyver/SVPlot
/**
* @param {HTMLElement} parent
* @param {*} params dark: true|false, type: 'running|stack|plot|timeline', labels: [''], period: 200
*/
SVPlot(parent, params = {}, context = window);
/**
* if sequence starts with 0 - will be displayed in seconds (add time in ms). If not 0 - unix date-time mode (add time in sec or ms)
* @param {*} data
* running [ y0, y1, .. ]
* stack [ y0, y1, .. ]
* plot { t0: [y0, ..], .. }
* timeline { t0: [y0, ..], .. } | { t0: {y0:state, y2:state}, .. }
*/
setData(data);
/**
* @param {*} params dark: true|false, type: 'running|stack|plot|timeline', labels: [''], period: 200
*/
setConfig(params);
/**
* @param {Array} labels
*/
setLabels(labels);
// clear plot data
clearData();
// stretch plot to fill window
fitData();
// move right and shift on new data
autoData();
// release resizer
release();
// set display range in seconds
setRange(range);<body>
<div id="plot"></div>
</body>
<script>
let plot = new SVPlot(document.getElementById('plot'), {});
</script>ΠΠ°Π΄Π°ΡΡΡΡ Π² ΠΊΠΎΠ½ΡΠΈΠ³Π΅ ΠΈΠ»ΠΈ ΡΠ΅ΡΠ΅Π· setLabels ΠΌΠ°ΡΡΠΈΠ²ΠΎΠΌ ΡΡΡΠΎΠΊ ['label', 'label2']. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ:
- Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΡ
ΡΠΊΠΎΠ±ΠΊΠ°Ρ
Π² ΠΊΠΎΠ½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ:
['label[%]', 'label2[ mm]'] - ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ½ΠΊΡΠΈΡΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ - Π·Π½Π°ΠΊΠΈ ΡΠΈΡΠ΅ Π² Π½Π°ΡΠ°Π»Π΅ ΡΡΡΠΎΠΊΠΈ:
['-label', '---label2']. Π§Π΅ΠΌ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΈΡΠ΅ - ΡΠ΅ΠΌ Π΄Π»ΠΈΠ½Π½Π΅Π΅ ΡΡΡΠΈΡ ΠΈ
ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π΄Π²ΠΈΠΆΠ΅ΡΡΡ Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ ΠΏΠ΅ΡΠΈΠΎΠ΄ΠΎΠΌ Π² ΠΊΠΎΠ½ΡΠΈΠ³Π΅ {period: 200}, ΡΠΎΡ
ΡΠ°Π½ΡΡ ΠΊΡΠ°ΠΉΠ½Π΅Π΅ ΠΏΡΠ°Π²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π²Π½ΡΠΌ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΡ. ΠΡΠ΅ΠΌΡ ΡΠΎΡΠ΅ΠΊ (ΠΎΡΡ x) Π±Π΅ΡΡΡ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΠΈΠ· Π±ΡΠ°ΡΠ·Π΅ΡΠ°. setData ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄Π°Π½Π½ΡΠ΅ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΠΌΠ°ΡΡΠΈΠ²Π° ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΎΡΠ΅ΠΉ: [ y0, y1, .. ].
ΠΠ²ΠΈΠΆΠ΅ΡΡΡ ΠΏΡΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π½ΠΎΠ²ΡΡ
Π΄Π°Π½Π½ΡΡ
. ΠΡΠ΅ΠΌΡ ΡΠΎΡΠ΅ΠΊ (ΠΎΡΡ x) Π±Π΅ΡΡΡ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΠΈΠ· Π±ΡΠ°ΡΠ·Π΅ΡΠ°. setData ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄Π°Π½Π½ΡΠ΅ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΠΌΠ°ΡΡΠΈΠ²Π° ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΎΡΠ΅ΠΉ: [ y0, y1.. ].
ΠΡΠ²ΠΎΠ΄ΠΈΡ ΡΠΎΡΠΊΠΈ Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ ΠΏΠΎ ΠΎΡΠΈ x. setData ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄Π°Π½Π½ΡΠ΅ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ { t0: [y0, y1..], .. }. Π€ΠΎΡΠΌΠ°Ρ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ:
- UNIX Π² ΡΠ΅ΠΊΡΠ½Π΄Π°Ρ ΠΈΠ»ΠΈ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ : Π½Π° Π³ΡΠ°ΡΠΈΠΊΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ Π΄Π°ΡΠ° ΠΈ Π²ΡΠ΅ΠΌΡ
- ΠΡΠΎΡΡΠΎ Π²ΡΠ΅ΠΌΡ Π² ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ , Π½Π°ΡΠΈΠ½Π°Ρ Ρ 0 (ΠΏΠ΅ΡΠ²Π°Ρ ΡΠΎΡΠΊΠ°): Π½Π° Π³ΡΠ°ΡΠΈΠΊΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ Π²ΡΠ΅ΠΌΡ Π² ΡΠ΅ΠΊΡΠ½Π΄Π°Ρ , Π½Π°ΡΠΈΠ½Π°Ρ Ρ 0 ΡΠ΅ΠΊΡΠ½Π΄
ΠΡΠ²ΠΎΠ΄ΠΈΡ Π±Π»ΠΎΠΊΠΈ "Π½Π°ΡΠ°Π»Π° ΠΈ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΡ ΡΠ°Π±ΠΎΡΡ" Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ ΠΏΠΎ ΠΎΡΠΈ x. setData ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄Π°Π½Π½ΡΠ΅ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ { t0: [y0, ..], .. } ΠΈΠ»ΠΈ { t0: {y0:state, y2:state}, .. }. Π€ΠΎΡΠΌΠ°Ρ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ:
- UNIX Π² ΡΠ΅ΠΊΡΠ½Π΄Π°Ρ ΠΈΠ»ΠΈ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ : Π½Π° Π³ΡΠ°ΡΠΈΠΊΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ Π΄Π°ΡΠ° ΠΈ Π²ΡΠ΅ΠΌΡ
- ΠΡΠΎΡΡΠΎ Π²ΡΠ΅ΠΌΡ Π² ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ , Π½Π°ΡΠΈΠ½Π°Ρ Ρ 0 (ΠΏΠ΅ΡΠ²Π°Ρ ΡΠΎΡΠΊΠ°): Π½Π° Π³ΡΠ°ΡΠΈΠΊΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ Π²ΡΠ΅ΠΌΡ Π² ΡΠ΅ΠΊΡΠ½Π΄Π°Ρ , Π½Π°ΡΠΈΠ½Π°Ρ Ρ 0 ΡΠ΅ΠΊΡΠ½Π΄